Wednesday, 7 April, 2021 UTC
Summary
Introduction
JavaScript has a lot of useful built-in methods for string manipulation, one of these method is the
split() method.In this article we'll be taking a closer look at the
split() method and how we can use it in conjunction with regular expressions to split a long string just the way we want.JavaScript's split() Method
When the
split(delimiter, limit) method is used on a string, it returns an array of substrings, and uses the delimiter argument's value as the delimiter. The delimiter argument can also be specified as a regular expression, which will then be used to search through the original string to find delimiters that match the specified expression.Additionally, we can specify the optional argument
limit, which specifies how many elements we want in our resulting substring array. Setting limit=2, for example, will yield an array that contains the first two substrings separated by a delimiter in the original string:const str = "JavaScript is the best programming language!";
const words = str.split(" ");
console.log(words);
Here, the string will be broken down on each new word:
["JavaScript", "is", "the", "best", "programming", "language!" ]
If we set the delimiter to something else, such as:
const chars = str.split("");
console.log(chars);
The string will be broken down on every character:
["J", "a", "v", "a", "S", "c", "r", "i", "p", "t", " ", "i", "s", " ", "t", "h", "e", " ", "b", "e", "s", "t", " ", "p", "r", "o", "g", "r", "a", "m", "m", "i", "n", "g", " ", "l", "a", "n", "g", "u", "a", "g", "e", "!"]
Regular Expressions with the split() Method
Now that we are comfortable with the use of the
split() method, let's step it up a notch, and introduce regular expressions to the mix:const paragraph = `The Answer to the Ultimate Question of Life, the Universe, and Everything is 42. Forty two. That's all there is.`;
// Split by words
const words = paragraph.split(" ");
console.log(words[2]);
// Split by sentences
const sentences = paragraph.split(/[!?.]/);
console.log(sentences[1]);
// Split all characters, with a limit of 2
const firstTwoChars = paragraph.split("", 2);
console.log(firstTwoChars);
// Split and reverse
const reverse = paragraph.split("").reverse().join("");
console.log(reverse);
This results in:
to
Forty two
["T", "h" ]
.24 si gnihtyrevE dna ,esrevinU eht ,efiL fo noitseuQ etamitlU eht ot rewsnA ehT
In the second example, we are passing a regular expression as the argument for the
split() method./[!?.]/represents a character set -!or?or.
Put simply, we are splitting the string at any of the specified characters.
In the third example, we are passing
2 as the second argument, limiting the resulting substring array to two elements.In the last example, we are reversing the string using the built-in
reverse() method. Because reverse() is an array method, we'll first split the original string into an array of individual characters, by using the split("") method, and then reverse() it.Finally, we can
join() the results toi create a reversed string from the array of characters.Conclusion
In this tutorial, we took a quick look at how to split a string in vanilla JavaScript. We've gone over the built-in
split() method, as well as how to use it with regular expressions.