Finding a substring in a string can be done in a variety of ways, depending on your needs.

JavaScript provides native methods to handle different cases. Let’s look at them and try to understand how they work.

To find a string in a string you can use one of the native JavaScript String methods.

1. includes method
2. indexOf method
3. search method
4. match method
5. matchAll method

1. includes method

The includes method will perform a case-sensitive search on a target string and will determine whether it contains a string to search. It will return a boolean value.

const text = 'The World Wide Web is commonly known as the web'

text.includes('world')
// false

text.includes('World')
// true

The includes method accepts two arguments searchString and position.

The searchString is a string value to search for.

The position is an optional argument that defines the start position within a string at which to begin searching (default value is 0).

NOTE: The includes method just tells you whether string exists in a target string, it doesn’t tell you the position.

Browser support: includes method.

2. indexOf method

The indexOf method checks for the first occurrence of the specified value in a string and returns its index as an integer. If not found it returns -1. NOTE: this method is case-sensitive.

const text = 'The World Wide Web is commonly known as the web'

text.indexOf('world')
// -1

text.indexOf('World')
// 4

The indexOf method accepts two arguments searchValue and fromIndex.

The searchValue is a string value to search for.

The fromIndex is an optional argument that defines the start position within a string at which to begin searching (default value is 0).

Browser support: indexOf method.

3. search method

The search method performs a match between a regular expression and the target string. It returns its index as an integer. If not found it returns -1.

const text = 'The World Wide Web is commonly known as the web'
const regExpSensitive = /world/g
const regExpInsensitive = /world/gi

text.search(regExpSensitive)
// -1

text.search(regExpInsensitive)
// 4

The search method accepts only one argument regexp which is a regular expression.

To compose and test regular expressions you can use the regex101 tool.

Browser support: search method.

4. match method

The match method will check the string against a regular expression and will return an array of found strings based on the regular expression flags. If no string is found it will return null.

const text = 'The World Wide Web is commonly known as the web'

text.match(/World/)
// [
//   0: "World",
//   groups: undefined,
//   index: 4,
//   input: "The World Wide Web is commonly known as the web"
// ]

text.match(/world/)
// null

The search method accepts only one argument regexp which is a regular expression.

Browser support: match method. 

5. matchAll method

The matchAll method returns an iterator of all the string occurrences that match the regular expression parameter.

const text = 'The World Wide Web is commonly known as the web'

// use spread syntax to get the results as an array
// 1. Case sensitive
[...text.matchAll(/web/g)]
// [
//   ["web", groups: undefined,index: 44, input: "The World Wide Web is commonly known as the web"]
// ]

// 2. Case insensitive
[...text.matchAll(/web/gi)]
// [
//   ["Web", index: 15, input: "The World Wide Web is commonly known as the web", groups: undefined],
//   ["web", index: 44, input: "The World Wide Web is commonly known as the web", groups: undefined]
// ]

Browser support: matchAll method.