On this tutorial, you’ll learn the several ways you possibly can split a string into substrings, and when each method is helpful.

Strings could be easily manipulated in JavaScript for various purposes — using native methods available within the language. We’ve recently covered the right way to convert a number to a string and the right way to convert a string to a number in JavaScript.

One other way a string could be manipulated is by extracting parts of it for use for something else. For instance, you may have a full URL but wish to extract just the hash part. Or you may have a listing of things separated by commas and need to make use of each of this stuff individually.

Split a String into Substrings Using substring()

All strings in JavaScript have a substring() method. This method could be used to retrieve a substring at specific indices.

substring() accepts two parameters. The primary one is required, and indicates the index the substring starts at. The second is optional, and indicates the index the substring ends at. If the second parameter is omitted, the substring will start on the index provided as a primary parameter and proceed until the tip of the string.

It’s vital to notice that the primary parameter is a 0-based index, meaning the primary character is at index 0, the second is at index 1, and so forth. One other vital thing to notice is that the second parameter is one greater than the index you would like the substring to finish at. For instance, when you want the string to finish at index 12, you provide 13 for the second parameter.

For instance:

const a = ‘Bytes and bits’;
const b = a.substring(10, 13);
console.log(b);
console.log(a);

In this instance, substring() is used on the variable a to retrieve a substring. The substring starts on the index 10 and ends on the index 13. The returned value is bit. Notice that substring() returns the substring without mutating the worth of the variable it’s used on.

See the Pen
Using substring to separate string by SitePoint (@SitePoint)
on CodePen.

Retrieving Indices

Normally, you won’t know the beginning or end indices of the substring while writing the code. The index may very well be based on other inputs or variables.

In those cases, you should use the indexOf() method. This method returns the index of a substring in a string if it occurs in it. If the substring doesn’t exist within the string, it returns -1.

When you retrieve the index using indexOf(), you possibly can retrieve the substring.

For instance:

const url = ‘https://sitepoint.com#chapter_1’;
const hash = url.indexOf(‘#’);
if (hash !== –1) {
console.log(url.substring(hash));
}

In this instance, you retrieve the index of the hash character # within the variable url. If the worth of the index will not be -1, you retrieve the substring from url starting on the index of the hash.

You’ll be able to try it out in the next CodePen demo.

See the Pen
Using substring with indexOf to separate string by SitePoint (@SitePoint)
on CodePen.

Split a String into Substrings Using split()

One other useful method to retrieve a substring from a string is the split() method. In case your string is a listing of things separated by a delimiter, you should use the split() method to separate the string into an array of substrings based on the delimiter.

split() accepts two optional parameters. The primary parameter is the delimiter that must be used to find out how the string is split. If none is provided, an array is returned with one item which is the string as a complete.

The second parameter is a number that limits the variety of substrings returned within the array. If provided, the string is split on the delimiter until the limit is reached, and the remainder of the text within the string will probably be omitted from the array.

For instance:

const str = ‘Toyota,Nissan,Mercedes,Tesla’;
const cars = str.split(‘,’);
console.log(cars);

In this instance, split() is used on a string that comprises a listing of automotive brand names separated by the , delimiter. The returned array comprises each automotive brand name as an item within the array.

Note that split() returns the array of substrings without affecting the worth of the string it’s used on.

The next live example demonstrates how a string separated by commas could be split into list items.

See the Pen
Using split to get substrings by SitePoint (@SitePoint)
on CodePen.

Conclusion

On this tutorial, you’ve learned the right way to split a string into substrings using the methods substring() and split().

substring() is helpful when you must retrieve a single substring from a string at a particular index. You should utilize it with indexOf() to retrieve the starting or ending index of the substring.

split(), however, is helpful when you could have a string that comprises a listing of things separated by a delimiter, similar to a comma. You’ll be able to then split the string into an array of substrings using split().

In the event you found this text useful, it’s possible you’ll also benefit from the following: