Check If String Contains Substring In JavaScript

Introduction

In this article, we will learn how to search and locate the words or substrings in paragraphs or large strings. We will achieve this by using both, JavaScript and jQuery.

Scenarios

Sometimes, we come across a requirement where we need to find the substrings in a paragraph. We have a couple of scenarios which we are going to look into to achieve it.

How to find if a word or a substring is present in the given string.
How to find a position of a particular word or a string in the given string
How to find a string and replace it with some other string.
How to find the number of occurrences of a particular word or a string in a given string or paragraph
How to find the single or multiple paragraphs which have the required word or string.

How to find if a word or a substring is present in the given string?

In this case, we will use the includes() method which determines whether a string contains the specified word or a substring. If the word or substring is present in the given string, the includes() method returns true; otherwise, it returns false.

The includes() method is case-sensitive.

This method does search the string. Also, it has got the flexibility to identify the starting position of the search.

Note: includes() method is not supported in IE11

Code

Search the entire string.

<script language="javascript">  
    var strng;  
    strng = "Either way, time largely defines the human experience.";  
    var incStr = strng.includes("human");  
    document.write("Is 'human' present in the string? : " + incStr);  
</script>

Output

Search for the specified start position.

Case 1 - Starting Point of the search is before ‘h’ in the word “human”

<script language="javascript">
      var strng;
      strng = 'Either way, time largely defines the human experience.';
      var incStr = strng.includes('human');
      document.write("Is 'human' present in the string? : " + incStr);
</script>

Output

Case 2 - Starting Point of search is after ‘h’ in the word “human”

<script language="javascript">  
    var strng;  
    strng = "Either way, time largely defines the human experience.";  
    var incStr = strng.includes("human", 38);  
    document.write("Is 'human' present in the string? : " + incStr);  
</script>

Output

How to find a position of a particular word or a substring in the given string?

We can achieve this by using a Regular Expression which provides us the text search functionality with its string method: search(). This uses an expression to search for a match and returns the starting position of the desired word or substring. We can use the search() method with either a regular expression or string as an argument.

Code

String as an argument.

<script language="javascript">  
    var strng;  
    strng = "Is time an illusion created within our minds? Or is it a dimension of the physical universe? Either way,time largely defines the human experience.";  
    var position = strng.search("illusion");  
    document.write("Desired String is present at position : " + position);  
</script>

Regular Expression as an argument.

<script language="javascript">  
    var strng;  
    strng = "Is time an illusion created within our minds? Or is it a dimension of the physical universe? Either way,time largely defines the human experience.";  
    var position = strng.search(/illusion/i);  
    document.write("Desired String is present at position : " + position);  
</script>

Output

The string position is 11 because JavaScript counts the first position of string as 0

How to find a string and replace it with some other string?

We can achieve this by using a Regular Expression that provides us the text replace functionality with its string method: replace() which replaces the specified string with the desired word or substring thereby modifying the original string. We can use the replace() method with either regular expression or string as an argument.

Code

String as an argument.

<script language="javascript">  
    var strng;  
    strng = "Is time an illusion created within our minds?";  
    document.write("Original String : " + strng + "<br\><br\>");  
    var modifiedStrng = strng.replace("created", "brainwashed");  
    document.write("Modified String : " + modifiedStrng + "<br\><br\>")  
</script>

Regular Expression as an argument.

<script language="javascript">
      var strng;
      strng = 'Is time an illusion created within our minds?';
      document.write('Original String : ' + strng + '<br\><br\>');
      var modifiedStrng = strng.replace(/CREATED/i, 'brainwashed');
      document.write('Modified String : ' + modifiedStrng + '<br\><br\>');
</script>

Output

How to find the number of occurrences of a particular word or a string in a given string or paragraph?

In this case, we will use the indexOf() Method in JavaScript to find the number of occurrences of desired word or substring.

Code

<script type="text/javascript" language="JavaScript1.1">
      var posn = 0;
      var numbr = -1;
      var j = -1;
      var para =
        'Is time an illusion created within our minds? Or is it a dimension of the physical universe? Either way,time largely defines the human experience.';
      var findWord = 'time';

      while (posn != -1) {
        posn = para.indexOf(findWord, j + 1);
        numbr += 1;
        j = posn;
      }

      document.write(para + '<br\><br\>');
      document.write(
        'There were ' +
          numbr +
          " occurrences of ''" +
          findWord +
          "'' in that paragraph."
      );
      document.close();
</script>

The code has a while loop to Search the substring or the word and count the number of occurrences

Output

Occurrences of any Substring or Word can be obtained just by passing it into the code, in the findWord variable, in this case.

 <script>
      var str = 'Hello world, welcome to the universe.';
      var n = str.includes('world');
      document.getElementById('demo').innerHTML = n;
 </script>

How to find the single or multiple paragraphs which have the required word or string?

In this case, we will use the contains() Method in jQuery to find the single or multiple paragraphs which contain the desired word or substring. Here, we have used 4 paragraphs for demonstration and two paragraphs are given same class names for giving an idea about the code functioning.

Code

 <body>
    <p class="p1">Is time an illusion created within our minds?</p>
    <p class="p1">Or is it a dimension of the physical universe?</p>
    <p class="p2">Either way, time largely defines the human experience.</p>
    <p class="p2">Telling time is an essential early math skill.</p>
   <script>
      $(document).ready(function () {
        $('.p1:contains("time")').addClass('p1-highlight');
        $('.p2:contains("time")').addClass('p2-highlight');
      });
   </script>
 </body>

Output

Hope this article was helpful.

Conclusion

In this article, we learn how to find any substring in a paragraph and also found that in which index number the substring is situated.

4 Comments

Join the conversation! Your thoughts help the community grow.

Sagar Pardeshi6y ago
Good article...keep it up..
Vishal Prajapati8y ago
Awesome...thanks for sharing with us....JavaScript Lover..:)
- Akash Kumhar8y ago
  Ofcourse.. Cheers mate..
Sanjay Sharma8y ago
Nice some more interesting facts here https://dev.to/adroitcoder/includes-vs-indexof-in-javascript.