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

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