In this tutorial, you’ll learn the different ways you can break a text 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 a string and how to convert a string to a number in JavaScript.
Another way in which a string can be manipulated is to extract parts of it for use in something else. For example, you might have a full URL but want to extract only the hash portion. Or you might have a comma separated list of items and you want to use each of those items separately.
Splitting a string into substrings using substring()
All strings in JavaScript contain a file substring() method. This method can be used to retrieve a substring in specific pointers.
substring() It accepts two parameters. The first 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 start at the index provided as the first parameter and continue to the end of the string.
It is important to note that the first parameter is a zero-based index, which means that the first character is in the index 0and the second in the index 1, and so on. Another important thing to note is that the second parameter is greater than the index at which you want the substring to end. For example, if you want the string to end at the index 12you supply 13 for the 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 the variable a To retrieve a substring. Substring starts from index 10 It ends at the index 13. The value returned is bit. Note that substring() Returns the substring without changing the value of the variable in which it is used.
see pen
Use a substring to split the string by SitePoint (SitePoint)
on CodePen.
return pointers
In most cases, you won’t know the start or end indices of the substring while writing the code. The pointer can be based on other inputs or variables.
In these cases, you can use a file indexOf() method. 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 the index is retrieved 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 can retrieve the index of the hash character # in the variable url. If the pointer value is not -1you can retrieve the substring from url Starting with the hash index.
You can try it out in the following CodePen demo.
see pen
Using a substring with indexOf to split the string by SitePoint (SitePoint)
on CodePen.
Splitting a string into substrings using split()
Another useful way to retrieve a substring from a string is split() method. If your string is a list of items separated by a delimiter, you can use split() A way to split a string into an array of sub-strings based on the determinant.
split() It accepts two optional parameters. The first parameter is the selector that should be used to specify how to split the string. If no array is provided, it is returned with one element which is the string as a whole.
The second parameter is a number that limits the number of substrings returned in the array. If provided, the string is divided by the delimiter until the limit is reached, and the rest of the text in the string is deleted from the array.
For example:
const str = 'Toyota,Nissan,Mercedes,Tesla';
const cars = str.split(',');
console.log(cars);
In this example, split() Used on a string containing a list of car brands separated by an extension , specific. The returned matrix contains the name of each car brand as an element of the matrix.
Note that split() Returns an array of substrings without affecting the value of the string in which it is used.
The following live example shows how a comma-separated string can be divided into list items.
see pen
Using Split to get substrings with SitePoint (SitePoint)
on CodePen.
conclusion
In this tutorial, you learned how to split a string into substrings using methods substring() And the split().
substring() Useful when you want to retrieve a single substring of a string at a specific index. You can use it with indexOf() Retrieves the start or end index of a substring.
split(), on the other hand, is useful when you have a string containing a list of items separated by a delimiter, such as a comma. You can then split the string into an array of sub-strings using split().
If you find this article helpful, you may also enjoy: