JavaScript split Examples

Separate parts from a string with the split function. Split on characters, strings and patterns.

dot net perls

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.

Method notes. 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 literal that has 4 substring separated with a plus delimiter. The "plus" character separates 4 color names.
Part 1: We call the split method with a one-character string argument: the "+" char.
Part 2: The array returned has 4 strings in it—the plus separates each string so there are fewer delimiters than strings.
Part 3: We loop over the array returned from the split method. It has 4 elements, one string for each color word.
JavaScript program that uses split var colors = "blue+orange+red+yellow"; // Part 1: split on the plus. var result = colors.split("+"); // Part 2: write the length. console.log("SPLIT RESULT LENGTH: " + result.length); // Part 3: write each resulting string. 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 Pattern details: \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 Pattern details: \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 Pattern details: [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.
Version 1: This version of the code splits the input string in a tight loop on the space character.
Version 2: The code splits the input string with a non-word character—this is a character class.
Result: In 2019, splitting on a regular expression in Chromium appears to be faster than splitting on a string.
JavaScript program that times split on character var result = 0; var words = "bird frog fish"; var x1 = performance.now(); // Version 1: split on a string. for (var i = 0; i < 10000000; i++) { var array = words.split(" "); result += array.length; } var x2 = performance.now(); // Version 2: split on a non-word character. for (var i = 0; i < 10000000; i++) { var array = words.split(/\W/); result += array.length; } var x3 = performance.now(); // Results. console.log("TIME 1: " + (x2 - x1)); console.log("TIME 2: " + (x3 - x2)); Output TIME 1 (2019): 1675.900 TIME 2: 1433.450

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-2020 sam allen. send bug reports to info@dotnetperls.com.