Search Word Or SubString From Paragraph Or String Using JavaScript And jQuery

Introduction

In this article, we will learn how to search and locate the words or substrings in the 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.

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

Implementation

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.

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

Output

JavaScript

Search for the specified start position.

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

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

Output

JavaScript

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

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

Output

JavaScript

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 regular expression or string as an argument.

Code

  • String as an argument
    1. <script language="javascript">  
    2.     var strng;  
    3.     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.";  
    4.     var position = strng.search("illusion");  
    5.     document.write("Desired String is present at position : " + position);  
    6. </script>  
  • Regular Expression as an argument
    1. <script language="javascript">  
    2.     var strng;  
    3.     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.";  
    4.     var position = strng.search(/illusion/i);  
    5.     document.write("Desired String is present at position : " + position);  
    6. </script>  

Output

JavaScript

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
    1. <script language="javascript">  
    2.     var strng;  
    3.     strng = "Is time an illusion created within our minds?";  
    4.     document.write("Original String : " + strng + "<br\><br\>");  
    5.     var modifiedStrng = strng.replace("created""brainwashed");  
    6.     document.write("Modified String : " + modifiedStrng + "<br\><br\>")  
    7. </script>  
  • Regular Expression as an argument
    1. <script language="javascript">  
    2. var strng;  
    3. strng = "Is time an illusion created within our minds?";  
    4. document.write("Original String : " + strng + "<br\><br\>");  
    5. var modifiedStrng = strng.replace(/CREATED/i,"brainwashed");  
    6. document.write("Modified String : " + modifiedStrng + "<br\><br\>")  
    7. </script>  

Output

JavaScript

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

  1. <script type="text/javascript" language="JavaScript1.1">    
  2. var posn = 0;    
  3. var numbr = -1;    
  4. var j = -1;    
  5. 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.";    
  6. var findWord = "time";  
  7.     
  8. while (posn != -1)  
  9. {    
  10.     posn = para.indexOf(findWord, j + 1);    
  11.     numbr += 1;    
  12.     j = posn;    
  13. }    
  14.     
  15. document.write(para+"<br\><br\>")    
  16. document.write("There were " + numbr + " occurrences of ''" + findWord + "'' in that paragraph.");   
  17. document.close();   
  18. </script>  

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

Output

JavaScript

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

  1. var str = "Hello world, welcome to the universe.";  
  2. var n = str.includes("world");  
  3. document.getElementById("demo").innerHTML = n;  

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

  1. <p class="p1">Is time an illusion created within our minds?</p>  
  2. <p class="p1">Or is it a dimension of the physical universe?</p>  
  3. <p class="p2">Either way, time largely defines the human experience.</p>  
  4. <p class="p2">Telling time is an essential early math skill.</p>  
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  6. <script>  
  7. $(document).ready(function(){  
  8.     $(".p1:contains(time)").css("background-color""yellow");  
  9.     $(".p2:contains(time)").css("background-color""aqua");  
  10. });  
  11. </script>  

Output

JavaScript

Hope this article was helpful.