How to Split a String into Substrings in JavaScript

In this tutorial, you’ll learn the different ways you can split a string into substrings, and when each method is useful.

Strings can be easily manipulated in JavaScript for various purposes – using native methods available in the language. We recently covered how to convert a number to string and how to convert string to number in JavaScript.

Another way a string can be manipulated is by extracting parts of it to use for something else. For example, you may have the complete URL but you only want to extract the hash part. Or you may have a list of items separated by commas and want to access each of these items separately.

Split a string into substrings using substring()

all strings in javascript have one substring() way. This method can be used to retrieve a substring at specific indices.

substring() Accepts two parameters. The first one is required, and indicates the index at which the substring begins. The second is optional, and indicates the index at which the substring ends. If the second parameter is omitted, the substring will begin at the index provided as the first parameter and continue until the end of the string.

It is important to note that the first parameter is a 0-based index, which means that the first character at index 0the second is on the index 1, and so on. Another important thing to note is that the second parameter is one greater than the index at which you want the substring to end. For example, if you want the string to end at index 12you provide 13 for the other parameters.

For example:

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

in this instance, substring() is used on variables a to retrieve a substring. substring starts at index 10 and ends at index 13, the returned value is bit, notice that substring() Returns the substring without changing the value of the variable used.

see pen
Using substring to split a string
by sitepoint (@SitePoint,
Feather codepen,

recover index

In most cases, you will not know the start or end indices of the substring at the time of writing the code. The index may be based on other inputs or variables.

In those cases, you can use indexOf() way. This method returns the index of a substring in a string if it occurs in it. If the substring does not exist in the string, it returns -1,

once you have retrieved the index using indexOf()You can retrieve the substring.

For example:

const url = 'https://sitepoint.com#chapter_1';
const hash = url.indexOf('#');
if (hash !== -1) 
  console.log(url.substring(hash)); 

In this example, you retrieve the index of the hash character # in variables url, if index does not have a value -1you retrieve from substring url Starting at the index of the hash.

You can try it out in the following Codepen demo.

see pen
Using substring with indexOf to split a string
by sitepoint (@SitePoint,
Feather codepen,

Split a string into substrings using split()

Another useful way to retrieve a substring from a string is split() way. If your string is a list of items separated by a delimiter, you can use split() Method for splitting a string into an array of substrings based on the delimiter.

split() Accepts two optional parameters. The first parameter is the delimiter that should be used to determine how the string is split. If none is provided, an array is returned with one item that is a string in its entirety.

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

For example:

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

in this instance, split() Used on a string containing a list of car brand names separated by , delimiter. The returned array contains each car brand name as an item in the array.

note that split() Returns an array of substrings without affecting the value of the string it uses.

The following live example demonstrates how a comma-separated string can be split into list items.

see pen
Using split to get substring
by sitepoint (@SitePoint,
Feather codepen,

conclusion

In this tutorial, you learned how to split a string into substrings using the methods substring() And split(),

substring() This is useful when you want to retrieve a substring from a string at a specific index. you can experiment with indexOf() To retrieve the starting or ending index of a substring.

split(), on the other hand, is useful when you have a string consisting of a list of items separated by a delimiter, such as a comma. You can then split the string into an array of substrings split(),

If you found this article useful, you may also enjoy the following:

Leave a Reply