jQuery to search and highlight matching text

()

Here is a simple jquery code to accept words and highlight matching text in the browser.

Let me explain the basic logic first. The idea is to look into the browser object’s content and try to match the word or phrase using the regular expression. Then, the object is replaced with the highlighted CSS, if the search matches.

First, the jQuery code, later the explanation…

jquery select and highlight text

function replaceText() {

    $("body").find(".highlight").removeClass("highlight");

    var searchword = $("#searchtxt").val();

    var custfilter = new RegExp(searchword, "ig");
    var repstr = "" + searchword + "";

    if (searchword != "") {
        $('body').each(function() {
            $(this).html($(this).html().replace(custfilter, repstr));
        })
    }
}
  1. $("body").find(".highlight").removeClass("highlight");
    This line removes the previously highlighted searched words.
  2. var custfilter = new RegExp(searchword, "ig");
    “i” is used to ignoring cases and “g” is used to search patterns throughout the string. Look at this Javascript regular expression link for more info. (of course, you can use more complex pattern matches).
  3. $(“body”).each(function( ) {…});
    I am looking for the search word throughout the ‘body’ element, hence, for each word in element, I am comparing the lookup text. If you want to search for particular content or block of content, then use the element ID, for example $(“#division”).each(function(){});
  4. $(this).html($(this).html().replace(custfilter, repstr));
    $(this) here refers to ‘body’ element, using java script’s “replace”  function we are replacing the searched word with the filtered word, with little CSS to highlight it!.

CSS

.highlight{ 
  background:#00FF00; 
  padding:1px; 
  border:#00CC00 dotted 1px; 
}

Content

<body>
  <input type="text" id="searchtxt" />
  <input type="button" value="search" onClick="replaceText();" id="highlightButton" />
  <p>
    The ACM Digital Library, a part of the ACM Portal, contains a comprehensive archive of the organization's journals, magazines, and conference proceedings. Online services include a forum called Ubiquity and Tech News digest.
    
    ACM requires the copyright of all submissions to be assigned to the organization as a condition of publishing the work.[2] Authors may post the documents on their own websites, but they are required to link back to the digital library's reference page for the paper. Though authors are not allowed to charge for access to copies of their work, downloading a copy from the ACM site requires a paid subscription.
  </p> 
 </body>

Just added a text box and a button; onclick of which search is triggered!.

Hit Like if this article was useful to you!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

2 thoughts on “jQuery to search and highlight matching text”

  1. This code doesn’t apply the CSS anywhere, it just replaces all results with a lowercase version of the same words.
    It also has a syntax error.

Leave a Reply

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