How to check if a string contains a substring using indexOf() in JavaScript

Check if a string contains a substring using indexOf() in JavaScript

To check if a string contains a substring in JavaScript:

1. Call the String.indexOf() method on the given string, passing it to the substring as a parameter.
2. Compare the returned value to -1.
3. If the returned value is not equal to -1, the string contains the substring.

const str = 'React is a popular JavaScript library.'
const substr = 'JavaScript'

const index = str.indexOf(substr)
console.log(index) // 19

if (str.indexOf(substr) !== -1) {
  console.log('String contains '${substr}'')
} else {
  console.log('String does not contain '${substr}'')
}
// String contains 'JavaScript'

The String.indexOf(searchValue[, fromIndex]) method takes two parameters:

1. searchValue - A string representing the value to search for within this string. If no string is explicitly specified, searchValue will default to undefined and this value will be searched in the current string.
2. fromIndex - An optional integer that represents the index to start the search from. The default value is 0.

The String.indexOf() method returns the index of the first occurrence of searchValue in the string, or -1 if not found. If an empty string is passed as searchValue, it will match at any index between 0 and str.length.

Note: In JavaScript, the first character in a string has an index of 0, and the index of the last character is str.length - 1.

Let us have another example:

const str = 'React is a popular JavaScript library.'

str.indexOf('React') // 0
str.indexOf('Preact') // -1
str.indexOf('React', 5) // -1
str.indexOf('') // 0
str.indexOf('', 5) // 5

The String.indexOf() method is case-sensitive, which means the following expressions evaluate to -1:

'JavaScript'.indexOf('script')    // -1
'JavaScript'.indexOf('SCRIPT')    // -1

If more than one matched substrings are present, String.indexOf() will return the first position of the first occurrence:

'Java, Java, Java!'.indexOf('Java')   // 0

The value 0, returned by the String.indexOf(), method does not evaluate to true. The same is the case with -1, which does not evaluate to false either.

So if you leave the equal operator to explicitly verify the presence of the string, you might see incorrect results.

Here is an interesting example:

const str = 'Apple is the manufacturer of iPhone X.'

if(str.indexOf('Apple')) {
    console.log('Awesome!')
}

if(str.indexOf('Samsung')) {
    console.log('Good!')
}

In the above code, the first if condition will never execute even though the word Apple does exist in the string. Similarly, the second if condition will evaluate to true although the string does not contain the word Samsung.

For this reason, when checking if a string contains another substring, the correct way to check would be:

if (str.indexOf('Apple') !== -1) {
    console.log('Awesome!')
}

if (str.indexOf('Samsung') !== -1) {
    console.log('Good!')
}

Read this article to learn about other JavaScript functions that can be used to check the presence of a substring in a string.

const str = 'React is a popular JavaScript library.'
const substr = 'JavaScript'

const index = str.indexOf(substr)
console.log(index) // 19

if (str.indexOf(substr) !== -1) {
  console.log('String contains '${substr}'')
} else {
  console.log('String does not contain '${substr}'')
}
// String contains 'JavaScript'

const str = 'React is a popular JavaScript library.'

str.indexOf('React') // 0
str.indexOf('Preact') // -1
str.indexOf('React', 5) // -1
str.indexOf('') // 0
str.indexOf('', 5) // 5

'JavaScript'.indexOf('script')    // -1
'JavaScript'.indexOf('SCRIPT')    // -1

'Java, Java, Java!'.indexOf('Java')   // 0

const str = 'Apple is the manufacturer of iPhone X.'

if(str.indexOf('Apple')) {
    console.log('Awesome!')
}

if(str.indexOf('Samsung')) {
    console.log('Good!')
}

if (str.indexOf('Apple') !== -1) {
    console.log('Awesome!')
}

if (str.indexOf('Samsung') !== -1) {
    console.log('Good!')
}

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript