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
