HomeSearch

JavaScript split Examples

Separate parts from a string with the split function. Split on characters, strings and patterns.
Split. Consider a string that has many parts. It has a delimiter character that we want to split upon. With split() in JavaScript we have many ways to do this.
Often, the best approach is the simplest. With a single character delimiter, we can write simple code to split the string. Sometimes a regular expression is needed.
First example. Here we introduce a string with a plus delimiter. The "plus" character separates four color names. We call split with a one-character string argument: the "+" char.Strings

Result: An array is returned from the split method. It has four elements, one string for each color word.

Array
JavaScript program that uses split var colors = "blue+orange+red+yellow"; // Split on the plus. var result = colors.split("+"); // Write our results. console.log("SPLIT RESULT LENGTH: " + result.length); for (var i = 0; i < result.length; i++) { console.log("SPLIT RESULT: " + result[i]); } Output SPLIT RESULT LENGTH: 4 SPLIT RESULT: blue SPLIT RESULT: orange SPLIT RESULT: red SPLIT RESULT: yellow
Regex. Sometimes we need a more complex approach to separating strings. We can use a regular expression. Here we split on one or more non-word characters (like spaces or newlines).

Tip: With a regular expression, we can treat multiple delimiters as a single one. This eliminates empty entries.

JavaScript program that uses split, regex var data = "cat bird frog"; // Split on one or more non-word characters. // ... This includes spaces and newlines. var results = data.split(/\W+/); console.log("SPLIT NON-WORD: " + results); Output SPLIT NON-WORD: cat,bird,frog Regex description: \W non-word character + one or more
Get numbers. With split() and a regular expression we can get the numbers from a string. We split on non-digit characters. The uppercase "D+" means one or more non-digit chars.

Tip: To extract numbers, we can split on "not number" characters. Then we use Number() to convert the strings to actual numeric values.

Tip 2: Split is a good choice for parsing simple data strings. In JavaScript we often have better performance with fewer statements.

JavaScript program that gets numbers from string var input = "0 cat 10(20)30-500"; // Split on no none or more non-digit chars. var numberStrings = input.split(/\D+/); // Convert all strings into Numbers. // ... Write them. for (var i = 0; i < numberStrings.length; i++) { var number = Number(numberStrings[i]); console.log("NUMBER: " + number); } Output NUMBER: 0 NUMBER: 10 NUMBER: 20 NUMBER: 30 NUMBER: 500 Regex description: \D+ one or more non-digit characters
Character set. We can split on a set of characters—here we have 3 char delimiters, and we split a string on all of them in a single call. We use a character set in the regular expression.

Tip: Be careful to escape metacharacters in the regex. If the pattern does not work, try escaping some characters with the backslash.

JavaScript program that uses split, set of characters // This string has multiple delimiter chars. var codes = "100x200y300z400"; // Split on a set of characters at once. var results = codes.split(/[xyz]/); // Display results. for (var i = 0; i < results.length; i++) { console.log("RESULT: " + results[i]); } Output RESULT: 100 RESULT: 200 RESULT: 300 RESULT: 400 Regex description: [xyz] the character x, y, or z
Benchmark. Split() takes more time to handle more complex delimiter patterns. Here we time split on a single-char space. We compare this to splitting on non-word characters.

Program 1: The program splits the input string in a tight loop on the space character.

Program 2: The page splits the input string with a non-word character—this is a character class.

Tip: When possible split() on the simplest possible string. Use a regular expression only when needed.

JavaScript program that times split on character var x1 = performance.now(); var result = 0; var words = "bird frog fish"; for (var i = 0; i < 1000000; i++) { // Split on a string. var array = words.split(" "); result += array.length; } var x2 = performance.now(); document.title = (x2 - x1) + "/" + result; JavaScript program that times split on regular expression var x1 = performance.now(); var result = 0; var words = "bird frog fish"; for (var i = 0; i < 1000000; i++) { // Split on a non-word character. var array = words.split(/\W/); result += array.length; } var x2 = performance.now(); document.title = (x2 - x1) + "/" + result; Output 84.125 ms split on space 280.1 ms split on non-word char
Split cache. In modern browsers we find a "split cache." The results of a split() call are cached in the JavaScript engine memory so they can be used again.

So: If we call split() with the same strings many times, this will execute quickly. Chromium V8 first implemented this optimization.

Cache String.prototype.split: mozilla.org

Note: In my testing, avoiding the overhead of split on the first call is still better for performance. The array is a faster syntax.

Split cache: Optimize the common obfuscator pattern where ["foo","bar","baz"] gets converted fo "foo,bar,baz".split(",").
A review. Splitting a string is a common operation in nearly all languages. In JavaScript it has special optimizations, but the logic is recognized from other languages.
© 2007-2019 Sam Allen. Every person is special and unique. Send bug reports to info@dotnetperls.com.
Home
Dot Net Perls