In this article, we will find the index of the first occurrence of a substring in a string using JavaScript.
An essential task in JavaScript programming is searching for substrings within a string. Finding the index of the first occurrence of a substring is a typical necessity, whether you are constructing a website, working with data processing, or simply altering the text.
Methods to Find the Index of the First Occurrence of a Substring in a Given String:
- Using the indexOf() method
- Using RegExp and match() method
- Using ES6’s includes() method
- Using the search() method
- Using ES6’s findIndex() method
Method 1: Using the indexOf() method
The index of the first occurrence of a given substring can be obtained for strings using the built-in method indexOf() provided by JavaScript. The basic syntax of indexOf() is as follows.
Example: Here is an example to find the index of the first occurrence of a substring in a string using the indexOf() method.
Javascript
// Example string const originalString = "This is a sample string"; Â Â // Target substring const targetSubstring = "sample"; Â Â // Finding the index of the first occurrence of the target substring const index = originalString.indexOf(targetSubstring); Â Â console.log("Index of the first occurrence:", index); |
Index of the first occurrence: 10
Method 2: Using RegExp and match() method
The match() method of JavaScript can also be used to determine the index of the first instance of a substring when paired with regular expressions (RegExp).
Example: Here is an example to find the index of the first occurrence of a substring in a string using the RegExp and match() method
Javascript
// Example string const originalString = "This is a sample string";   // Target substring const targetSubstring = "sample";   // Creating a regular expression dynamically const regex = new RegExp(targetSubstring);   // Finding the index of the first occurrence // of the target substring const match = originalString.match(regex);   if (match) {     const index = match.index;     // Output: 21     console.log("Index of the first occurrence:", index); } else {     console.log("Substring not found."); } |
Index of the first occurrence: 10
Method 3: Using ES6’s includes() method
The ES6 includes() method is mostly used to determine whether a string contains a particular substring, but with a little fiddling, it can also be used to get the index of the first occurrence.
Example: Here is an example to find the index of the first occurrence of a substring in a string using ES6’s includes() method.
Javascript
// Example string const originalString = "This is a sample string.";   // Target substring const targetSubstring = "sample";   // Check if the target substring // exists in the original string const found = originalString.includes(targetSubstring);   if (found) {     const index = originalString.indexOf(targetSubstring);     // Output: 21     console.log("Index of the first occurrence:", index); } else {     console.log("Substring not found."); } |
Index of the first occurrence: 10
Method 4: Using the search() method
Another approach for using regular expressions to determine the index of a substring’s first appearance is the search() method.
Example: Here is an example to find the index of the first occurrence of a substring in a string using the search() method.
Javascript
// Example string const originalString = "This is a sample string"; Â Â // Target substring const targetSubstring = "sample"; Â Â // Creating a regular expression dynamically const regex = new RegExp(targetSubstring); Â Â // Finding the index of the first // occurrence of the target substring const index = originalString.search(regex); Â Â console.log("Index of the first occurrence:", index); |
Index of the first occurrence: 10
Method 5: Using ES6’s findIndex() method
The index of the first instance of a substring can be discovered using the array’s findIndex() method. But first, the string must be turned into a character array.
Example: Here is an example to find the index of the first occurrence of a substring in a string using ES6’s findIndex() method.
Javascript
// Example string const originalString = "This is a sample string.";   // Target substring const targetSubstring = "sample";   // Convert the string into an array of characters const charArray = Array.from(originalString);   // Finding the index of the first occurrence // of the target substring const index = charArray.findIndex(     (_, i) =>         originalString.slice(             i,             i + targetSubstring.length         ) === targetSubstring );   // Output: 21 console.log("Index of the first occurrence:", index); |
Index of the first occurrence: 10
