JavaScript Program to find the Index of the First Occurrence of a Substring in a String

0 0 3 minutes read

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); 

Output

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."); 
}

Output

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."); 
}

Output

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); 

Output

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);

Output

Index of the first occurrence: 10

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!