JavaScript String Search

By | August 22, 2022
0 Comment

JavaScript Search Methods

  • String indexOf()
  • String lastIndexOf()
  • String startsWith()
  • String endsWith()

JavaScript String indexOf()

The indexOf() method returns the index of (the position of) the first occurrence of a specified text in a string:

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The indexOf() method returns the position of the first occurrence of a specified text:</p>
<p id="demo"></p>
<script>
let str = "Please locate where 'locate' occurs!";
document.getElementById("demo").innerHTML = str.indexOf("locate");
</script>
</body>
</html>

Result:

JavaScript String Methods

The indexOf() method returns the position of the first occurrence of a specified text:

7

Note

JavaScript counts positions from zero.

0 is the first position in a string, 1 is the second, 2 is the third, …

JavaScript String lastIndexOf()

The lastIndexOf() method returns the index of the last occurrence of a specified text in a string:

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The lastIndexOf() method returns the position of the last occurrence of a specified text:</p>
<p id="demo"></p>
<script>
let str = "Please locate where 'locate' occurs!";
document.getElementById("demo").innerHTML = str.lastIndexOf("locate");
</script>
</body>
</html>

Result:

JavaScript String Methods

The lastIndexOf() method returns the position of the last occurrence of a specified text:

21

Both indexOf(), and lastIndexOf() return -1 if the text is not found:

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Both indexOf(), and lastIndexOf() return -1 if the text is not found:</p>
<p id="demo"></p>
<script>
let str = "Please locate where 'locate' occurs!";
document.getElementById("demo").innerHTML = str.indexOf("John");
</script>
</body>
</html>

Result:

JavaScript String Methods

Both indexOf(), and lastIndexOf() return -1 if the text is not found:

-1

Both methods accept a second parameter as the starting position for the search:

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The indexOf() method accepts a second parameter as the starting position for the search:</p><p id="demo"></p>
<script>
let str = "Please locate where 'locate' occurs!";
document.getElementById("demo").innerHTML = str.indexOf("locate",15);
</script>
</body>
</html>

Result:

JavaScript String Methods

The indexOf() method accepts a second parameter as the starting position for the search:

21

The lastIndexOf() methods searches backwards (from the end to the beginning), meaning: if the second parameter is 15, the search starts at position 15, and searches to the beginning of the string.

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>}
<p>The lastIndexOf() method accepts a second parameter as the starting position for the search.</p>
<p>Remember that the lastIndexOf() method searches backwards, so position 15 means start the search at position 15, and search to the beginning.</p>
<p>Position 15 is position 15 from the beginning.</p>
<p id="demo"></p>
<script>
let str = "Please locate where 'locate' occurs!";
document.getElementById("demo").innerHTML = str.lastIndexOf("locate", 15);
</script>
</body>
</html>

Result:

JavaScript String Methods

The lastIndexOf() method accepts a second parameter as the starting position for the search.

Remember that the lastIndexOf() method searches backwards, so position 15 means start the search at position 15, and search to the beginning.

Position 15 is position 15 from the beginning.

7

JavaScript String search()

The search() method searches a string for a specified value and returns the position of the match:

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The search() method returns the position of the first occurrence of a specified text in a string:</p>
<p id="demo"></p>
<script>
let str = "Please locate where 'locate' occurs!";
document.getElementById("demo").innerHTML = str.search("locate");
</script>
</body>
</html>

Result:

JavaScript String Methods

The search() method returns the position of the first occurrence of a specified text in a string:

7

Did You Notice?

The two methods, indexOf() and search(), are equal?

They accept the same arguments (parameters), and return the same value?

The two methods are NOT equal. These are the differences:

  • The search() method cannot take a second start position argument.
  • The indexOf() method cannot take powerful search values (regular expressions).

You will learn more about regular expressions in a later chapter.

JavaScript String match()

The match() method searches a string for a match against a regular expression, and returns the matches, as an Array object.

Example 1

Search a string for “ain”:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Search</h2>
<p>Search a string for "ain":</p>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
document.getElementById("demo").innerHTML = text.match(/ain/g);
</script>
</body>
</html>

Result:

JavaScript String Search

Search a string for “ain”:

ain,ain,ain

Read more about regular expressions in the chapter JS RegExp.

Note

If a regular expression does not include the g modifier (to perform a global search), the match() method will return only the first match in the string.

Syntax

string.match(regexp)

regexpRequired. The value to search for, as a regular expression.
Returns:An Array, containing the matches, one item for each match, or null if no match is found

Example 2

Perform a global, case-insensitive search for “ain”:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Search</h2>
<p>Perform a global, case-insensitive search for "ain":</p>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
document.getElementById("demo").innerHTML = text.match(/ain/gi);
</script>
</body>
</html>

Result:

JavaScript String Search

Perform a global, case-insensitive search for “ain”:

ain,AIN,ain,ain

JavaScript String includes()

The includes() method returns true if a string contains a specified value.

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Search</h2>
<p>Check if a string includes "world":</p>
<p id="demo"></p>
<p>The includes() method is not supported in Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>
</body>
</html>

Result:

JavaScript String Search

Check if a string includes “world”:

true

The includes() method is not supported in Internet Explorer.

Syntax

string.includes(searchvalue, start)

searchvalueRequired. The string to search for
startOptional. Default 0. Position to start the search
Returns:Returns true if the string contains the value, otherwise false
JS Version:ES6 (2015)

Check if a string includes “world”, starting the search at position 12:

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Search</h2>
<p>Check if a string includes "world":</p>
<p id="demo"></p>
<p>The includes() method is not supported in Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world", 12);
</script>
</body>
</html>

Result:

JavaScript String Search

Check if a string includes “world”:

false

The includes() method is not supported in Internet Explorer.

Browser Support

includes() is an ES6 feature (JavaScript 2015).

It is supported in all modern browsers:

ChromeEdgeFirefoxSafariOpera
YesYesYesYesYes

includes() is not supported in Internet Explorer.

JavaScript String startsWith()

The startsWith() method returns true if a string begins with a specified value, otherwise false:

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Check if a string starts with "Hello":</p>
<p id="demo"></p>
<p>The startsWith() method is not supported in Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>
</body>
</html>

Result:

JavaScript Strings

Check if a string starts with “Hello”:

true

The startsWith() method is not supported in Internet Explorer.

Syntax

string.startsWith(searchvalue, start)

Parameter Values

ParameterDescription
searchvalueRequired. The value to search for.
startOptional. Default 0. The position to start the search.

Examples

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>The startsWith() method.</p>
<p id="demo"></p>
<p>The startsWith() method is not supported in Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 6);
</script>
</body>
</html>

Result:

JavaScript Strings

The startsWith() method.

true

The startsWith() method is not supported in Internet Explorer.

Note

The startsWith() method is case sensitive.

Browser Support

startsWith() is an ES6 feature (JavaScript 2015).

It is supported in all modern browsers:

ChromeEdgeFirefoxSafariOpera
YesYesYesYesYes

startsWith() is not supported in Internet Explorer.

JavaScript String endsWith()

The endsWith() method returns true if a string ends with a specified value, otherwise false:

Example

Check if a string ends with “Doe”:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Check if a string ends with "Doe":</p>
<p id="demo"></p>
<p>The endsWith() method is not supported in Internet Explorer.</p>
<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>
</body>
</html>

Result:

JavaScript Strings

Check if a string ends with “Doe”:

true

The endsWith() method is not supported in Internet Explorer.

Syntax

string.endsWith(searchvalue, length)

Parameter Values

ParameterDescription
searchvalueRequired. The value to search for.
lengthOptional. The length to search.

Check if the 11 first characters of a string ends with “world”:

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Check in the 11 first characters of a string ends with "world":</p>
<p id="demo"></p>
<p>The endsWith() method is not supported in Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.endsWith("world", 11);
</script>
</body>
</html>

Result:

JavaScript Strings

Check in the 11 first characters of a string ends with “world”:

true

The endsWith() method is not supported in Internet Explorer.

Note

The endsWith() method is case sensitive.

Browser Support

endsWith() is an ES6 feature (JavaScript 2015).

It is supported in all modern browsers:

ChromeEdgeFirefoxSafariOpera
YesYesYesYesYes

endsWith() is not supported in Internet Explorer.

Leave a Reply

Your email address will not be published. Required fields are marked *