How to Break Apart a String in JavaScript
JavaScript has a variety of string-related functions that can be used to manipulate text-based objects. One of the most common reasons for breaking apart strings is when parsing values in lists. The JavaScript language provides a built-in function, the “split” function, that breaks up a string into any number of values based on a specific character, or "delimiter." Once split into parts, each value is placed in an array that can be manipulated with JavaScript’s built-in array functions.
Other People Are Reading
Instructions
-
-
1
Open a text editor and create a new file named “splitString.html”. In most text editors, new files are created by selecting “New” from the “File” menu.
-
2
Add some basic HTML tags to “splitString.html” that include a head section and a body section. Together, these tags comprise a very basic HTML page.
<html>
<head></head>
<body></body>
</html> -
-
3
Insert a "<textarea>" HTML tag and a "</textarea>" HTML tag between splitString.html’s “<body>” and “</body>” tags. Assign the “<textarea>” tag an “id” value “string” and insert the text “ABC12345EFG” between the “<textarea>” and “</textarea>” tags. Note that the text "ABCD12345EFG" is used only as an example; this text can be any non-reserved (valid) text with a specific delimiter.
<textarea id="string">ABCD12345EFG</textarea>
-
4
Insert an HTML “<input>” tag after the closing “</textarea>” tag and assign the “<input>” tag a “type” attribute “submit”. Assign an “onclick()” event to the “<input>” tag that calls a function named “splitString()”.
<input type="submit" onclick="splitString()";>
-
5
Create the "splitString" function by placing two JavaScript delimiters (“<script>” and “</script>”) between splitString.html’s “<head>” and “</head>” tags. Assign the “<script>” tag a “type” value “text/javascript”.
<script type=”text/javascript”>
</script> -
6
Declare the “splitString” function between splitString.html’s open and close “<script>” tags. Place two curly brackets after the function declaration as a placeholder for the function’s code.
function splitString()
{
} -
7
Insert a JavaScript “getElementById” method inside the splitString function’s curly brackets. Use the “getElementById” method to retrieve the value of the “string” text area (ABC12345EFG). Assign the text value to a variable named “stringToSplit”.
stringToSplit = document.getElementById("string").value;
-
8
Use the JavaScript “split” function to break up the “stringToSplit” variable on the “3” character. Store the result of the “split” function in an array named “splitString”. The “splitString” array now contains two values: “ABC12” and “45EFG”.
splitString = stringToSplit.split("3");
-
9
Use two JavaScript “alert” functions to create two alert boxes. The first alert box alerts the first array value (splitString[0]) to the browser and the second alert box alerts the second array value (splitString[1]) to the browser. Save and close splitString.html. After step 9, splitString.html will appear as shown below:
<html>
<head>
<script type="text/javascript">
function splitString()
{
stringToSplit = document.getElementById("string").value;
splitString = stringToSplit.split("3");
alert(splitString[0]);
alert(splitString[1]);
}
</script>
</head>
<body>
<textarea id="string">ABCD12345EFG</textarea>
<input type="submit" onclick="splitString()";>
</body>
</html> -
10
Open splitString.html in a JavaScript-enabled Web browser. Click the "Submit" button and verify that the split string is alerted in two parts to the Web browser.
-
1
Tips & Warnings
When breaking apart strings with more than a single delimiter value, a JavaScript “for” loop can be used to retrieve the values.
JavaScript strings are objects that come with a variety of object methods that can be used to manipulate strings, including functions that retrieve characters, replace substrings and join strings.
The “slice()” JavaScript function can be used to break apart a string and return a new string.
The delimiter used with the “split()” function is not included in the results. Typically, this result is expected.
JavaScript "alert" boxes may not function as expected if the browser's settings do not allow them.
References
Resources
- Photo Credit Dynamic Graphics Group/Dynamic Graphics Group/Getty Images
