Find string in string with Vanilla JavaScript
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
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.