JavaScript String Methods: A Guide to substring() and indexOf()
This artice will serve as a guide to explain the must-know details of a substring in JavaScript
Introduction
In this post you will be learning about the what, why and how of substrings in JavaScript. It is crucial to know about substrings in JavaScript in order to manipulate and use text data effectively.
What is a Substring
A Substring is a part of a string sequence that is inside the main string. For example, if we consider the code snippet below:
let greet = "Hello User! Welcome to my Substack Newsletter";In the above code snippet, greet is the main string carrying a sequence of string characters, "Hello User! Welcome to my Substack Newsletter".
Here, “Hello” is a substring, “User is a substring, and all other parts of the string above including”Welcome”, “to”, “my”, “Substack” and “Newsletter” are also substrings in the string greet.
Another Example of a Substring
let message = “Hello Substack!“In the above string message, both “Hello” and “Substack” are substrings within the string message.
Locating the Position of a Substring
Substrings also follow zero index method meaning, the first character always resides at the position of index zero.We need to use the indexOf() method to check position of a substring within a string. When this method finds the position of the specified substring, it will always return the first occurrence of that particular substring.
Now let's understand what's the meaning of the first occurrence of a substring with an example?
Example Code
let greet = "Hello World, How are you World?"
let position = greet.indexOf("World");
console.log(position);
//6If you want to get the position of the substring “World “, then the indexOf method will return you the position (index) of the first occurrence of “World “ meaning, it will return the position of the index of W for the substring World that appears first in the sequence of the substrings. Notice, there are two substrings of World in the greet string. So, using the indexOf method we write the code snippet as shown above in the code block and we find the output in the console as 6.
The output is 6 means, the index position of the substring “World” is 6. Now how do explain this value as the index position or position of the substring, “World”? For this explanation, we need to consider the string greet :
greet = "Hello World, How are you World?"
Starting from the first character of the substring , we need to start counting the index position from zero. Let us write in a graphical format.
“H” ======> index 0
“e” ======> index 1
“l” ======> index 2
“l” ======> index 3
“o” ======> index 4
“ “ ======> index 5
“W” ======> index 6
“o” ======> index 7
“r” ======> index 8
“l” ======> index 9
“d” ======> index 10
“,” ======> index 11
“ “ ======> index 12
“H” ======> index 13
“o” ======> index 14
“w” ======> index 15
“ “ ======> index 16
“a” ======> index 17
“r” ======> index 18
“e” ======> index 19
“ “ ======> index 20
“y” ======> index 21
“o” ======> index 22
“u” ======> index 23
“ “ ======> index 24
“W” ======> index 25
“o” ======> index 26
“r” ======> index 27
“l” ======> index 28
“d” ======> index 29
“?” ======> index 30
In the above example the resultant position for the substring, “World” has a value of 6, that is it is in the 6th position or rather the index position of the substring “World” is 6, that is as per in the chart above, the index position of the character “W” in the first time that the substring “World” appears in the string. The second occurence of the substring, “World” is at index position 25 as per the index chart shown above. Note that the index position of the first character, “H”, in the string, is zero as we are following the zero index method.
Also note that the index position of the substring, “World”, is the index position of the first character, “W” in this substring. I have calculated the index position of all the substrings and the characters in the string as shown above in the chart for your reference.
If the search for the substring is carried out for a wrong substring that is not existing in the string, the search result will return an index of -1 to show you that the search is not successful.
For example, if we try to find the index position for the substring, “Substack” by writing the code,
let greet = "Hello World, How are you World?"
let position = greet.indexOf("Substack");
console.log(position);
//-1
The above search will return an index position of -1 as the substring, “Substack” does not even exist in the string.
The position search will also return an index position of a substring search as -1 if you search for the same existing substring with a different case since the indexOf() method is case sensitive. For example, if we search for the position of substring, “world” instead of “World”, the case “w” does not exist in the string, hence the search will return a result of -1 in the console output.
let greet = "Hello World, How are you World?"
let position = greet.indexOf("world");
console.log(position);
// -1
Finding the position of a substring from a specific position
For searching the index position of a substring from a specified position in the string, we need to write two arguments inside the indexOf() method, the first argument is the particular substring that you want to locate and the second one is a specific starting position for beginning the search. However, if the second argument is not provided, then by default, the starting position will be considered as the start of the main bigger string, as we have seen in the previous searches listed in the above examples.
Example
let greet = "Hello World, How are you World?"
let position = greet.indexOf("World", 14);
console.log(position);
// 25
In the above example, we write the second argument , 14 inside the indexOf() thereby triggering the search from 14th index position whereby as you can see from the graph I have shown above, starting from 14th place, if you search for the substring, “World”, then, the search will return the second occurence of the substring, “World”, that is, the substring, “World”, that is present in the second instance within the string and the index position of the second occurence of “World”, is the position of “W” in the second “World”, which is 25 that I have explained in details within my chart above.
Conclusion
In this article, we learnt the basics of a substring in JavaScript and how to search for substrings in different scenarios using the indexOf() method. Using indexOf() is so useful when you need to check if a substring exists in a string or not and also to find its index location in order to carry out further tasks in the program that you will learn in other lessons to come.Check out the codepen source code here.