In this tutorial, you’ll learn different ways to split strings into substrings and when each method is useful.
Strings can be easily manipulated in JavaScript for a variety of purposes using native methods available in the language. We recently covered how to convert numbers to strings and how to convert strings to numbers in JavaScript.
Another way to manipulate strings is to extract parts of them and use them for other purposes. For example, you may have a full URL and want to extract just the hash part. Or maybe you have a list of items separated by commas and you want to use each of these items individually.
Split a string into substrings using substring()
All strings in JavaScript have substring() Method. You can use this method to get a substring at a specific index.
substring() Accepts two parameters. The first is required and gives the index where the substring begins. The second is optional and indicates the index where the substring ends. If you omit the second parameter, the substring starts at the index specified as the first parameter and continues to the end of the string.
It’s important to note that the first parameter is a 0-based index. i.e. the first character is at the index. 0the second is at the index 1, and so on. Another important thing to note is that the second parameter is 1 greater than the index where the substring ends.For example, if you end the string with an index 12you provide 13 Second parameter.
for example:
const a = 'Bytes and bits';
const b = a.substring(10, 13);
console.log(b);
console.log(a);
In this example, substring() used in variables a Get a substring.substring starts at index 10 end at index 13. The return value is bit. be careful substring() Returns a substring without changing the values of the variables used.
look at the pen
Split string by SitePoint (@SitePoint) using substring
with a code pen.
Get index
Most of the time you don’t know the starting or ending index of a substring while writing code. Indexes may be based on other inputs or variables.
In such cases, indexOf() Method. This method returns the index of the substring if it is contained within the string.If the substring does not exist in the string, it is returned -1.
Once you have the index using indexOf()you can get 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 we get the index of the hash character # in a variable url. If the index value is -1get a substring from url Start with the hash index.
You can try it with the following CodePen demo.
look at the pen
Split string by SitePoint (@SitePoint) using substring with indexOf
with a code pen.
Split a string into substrings using split()
Another convenient way to get a substring from a string is split() Method. If the string is a delimited list of items, split() A method that splits a string into an array of substrings based on a delimiter.
split() Accepts two optional parameters. The first parameter is the delimiter used to determine how the string is split. If none is specified, an array is returned containing one item which is the entire string.
The second parameter is a number that limits the number of substrings returned in the array. If specified, the string will be split at the delimiter until the limit is reached and the remaining 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 example, split() Used in a string containing a list of car brand names separated by , delimiter. The returned array contains each car’s brand name as an item in the array.
Please note split() Returns an array of substrings without affecting the string values used.
The following working example shows how to split a comma-separated string into list items.
look at the pen
Get substring by SitePoint (@SitePoint) using Split
with a code pen.
Conclusion
In this tutorial, we learned how to split a string into substrings using the method substring() When split().
substring() Useful for getting a single substring from a string at a specific index.you can use it indexOf() Get the starting or ending index of a substring.
split()On the other hand, it’s useful when you have a string containing a list of items separated by delimiters such as commas.Then you can split the string into an array of substrings using split().
If you found this article useful, you may also enjoy:
