JavaScript

String search Methods in JavaScript

During programming, the user needs to search for specific values in a string. These values could be a substring or position of a specific word in the string. For this, JavaScript has various methods that can be used while searching a string.

String Search Methods

JavaScript provides various string searching methods, each with their own unique functionalities. Each method serves a different purpose, whereas some might also have different parameters. These methods are:

Let’s understand each of these one by one.

search()

This is an in-built method in JavaScript that allows users to search for a specific word in a string. As a result, it returns the position of that word.

Syntax:

string.search(valueToSearch)

Here, valueToSearch represents the expression that needs to be searched.

Return Value: A number is returned which shows the index of the value that is searched in the String and in case of no result, -1 is returned.

Here’s an example for better understanding:

<html>
<body>
<p>Hello!! Welcome to our Website..</p>
<p>What's the position of "to"? Click the button to see the position.</p>
<button onclick="searchMethod()">Search</button>
<p id="div"></p>
<script>
function searchMethod() {
  var str = "Hello!! Welcome to our Website..";
  var n = str.search("to");
  document.getElementById("div").innerHTML = n;
}
</script>
</body>
</html>

In this the search method searches for the word “to” and returns the position of it.

Output:

Well, what happens when the search method is unable to find the specific word in the string. Following example demonstrate this:

<html>
<body>
<p>Hello!! Welcome to our Website..</p>
<p>What's the position of "here" in the above string? Click the button to see the position.</p>
<button onclick="searchMethod()">Search</button>
<p id="div"></p>
<script>
function searchMethod() {
  var str = "Hello!! Welcome to our Website..";
  var n = str.search("here");
  document.getElementById("div").innerHTML = n;
}
</script>
</body>
</html>

In this example, the word “here” is not present in the string. That’s why it returned -1 as an output.

Output:

replace()

It’s another JavaScript built-in method that takes two parameters, the first one is the value to be searched and the second parameter is the value that needs to be replaced in place of the first value.

Syntax:

string.replace(valueToSearch, valueToReplace)

Here, valueToSearch represents the word that needs to be searched and valueToReplace is the new value that will take the position of valueToSearch.

Return Value: A new string is returned with the replaced value.

Let’s understand this better with an example:

<html>
<body>
<p>Hello!! Welcome to our Website..</p>
<p>To replace "Website" with "Home" click the button.</p>
<button onclick="ReplaceMethod()">Replace</button>
<p id="div"></p>
<script>
function ReplaceMethod() {
  var str = "Hello!! Welcome to our Website..";
  var n = str.replace("Website","Home");
  document.getElementById("div").innerHTML = n;
}
</script>
</body>
</html>

In this, we simply replaced the word Website with Home using the replace method.

Output:

indexOf()

Another built-in JavaScript searching method for string that’s case sensitive is indexOf() method which searches the string and output is returned which shows the position of the first occurrence of the specified value.

Syntax:

string.indexOf(valueToSearch)

OR

string.indexOf(valueToSearch, startingIndex)

Here, valueToSearch represents the word that needs to be searched and startingIndex is an optional parameter that specifies at which position the search needs to be started. It has a default value of 0.

Return Value: It returns a number of the index where the value is found for the first time and if the value is not found, it returns -1.

Example:

<html>
<body>
<<p>Hello!! Welcome to our Website..</p>
<p>What's the index of the world "l"?</p>
<button onclick="IndexOfMethod()">Search</button>
<p id="div"></p>
<script>
function IndexOfMethod() {
  var str = "Hello!! Welcome to our Website..";
  var n = str.indexOf("l");
  document.getElementById("div").innerHTML = n;
}
</script>
</body>
</html>

This shows that we’ll get the index where the letter “l” first occurred.

Output:

Here are some more examples to give better understanding of the method:

let str = "Hello world, welcome to our website";
console.log(str.indexOf("e", 5));  // Returns 14

console.log(str.indexOf("Welcome"));  // Returns -1

Here, in the first example the position was given 5, so it started searching from the 5th index. In the second example “Welcome” with capital W was written for the search. As it’s a case sensitive method so it returned -1.

Output:

lastIndexOf()

This JavaScript method searches the whole string and returns the position of the searched value where it last occured. This method is also case sensitive.

Syntax:

string.lastIndexOf(valueToSearch)

OR

string.lastIndexOf(valueToSearch, startingIndex)

Here, valueToSearch represents the word that needs to be searched and startingIndex is an optional parameter that specifies at which position the search needs to be started. If you don’t mention startingIndex, the default value is always the length of the string.

Return Value: It returns a number of the index where the value was found for the last time and in case it is not found then it returns -1.

Example:

let s= "A good cook could cook as much cookies as a good cook who could cook cookies";

console.log(s.lastIndexOf("cook"));      // Returns 69

console.log(s.lastIndexOf("Cookies"));  // Returns -1

console.log(s.lastIndexOf("co"));  // Returns 69

console.log(s.lastIndexOf("a"));        // Returns 42

console.log(s.lastIndexOf("much", 30)); // Returns 26

Here in these examples, we find the last occurrence of these specific words and return the position of these. As this method is case sensitive so writing “Cookies” instead of “cookies” gave us a -1 as an output.

Output:

Conclusion:

JavaScript provides us with various searching methods. These methods help in searching for specific words or the index where they occured. Some of these methods are case sensitive, so you’ve to be precise about the word you’re searching. All of these methods are accessible built-in and can easily be used by the user.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.