jQuery highlight

jQuery highlight plugin is based on jQuery - obviouslyThere’s a nice jQuery highlight plugin by Johann Burkard. The only problem I had with it was the missing lenient mode. The pattern matching is case-insensitive but not lenient. Enter, my own jQuery highlight plugin that supports lenient mode. Lenient for me means that if you ask the plugin to highlight “selection” it will highlight “selection” as well as “séléction”, “SÉLÉCTION” and all other accented variations of each character.

This is perfect to display search results obviously. To see it in action try the demo below or use this blog’s search field at the top of this page.

Well then, here it is: the first lenient jQuery highlight plugin!

Demo

Click the buttons below to see what is highlighted:

   

 

Usage

Add the plugin

Note that this a jQuery plugin. Hence, you must first download and include jQuery in your HTML page(s). Then you download this highlight plugin and add it to your HTML page after jQuery. You can download either the regular jquery-highlight.js (8.3KB) or the YUI compressed version (5.2KB).

Define the CSS class

Create an entry in your style sheet for the highlight class.

.highlight { background-color: yellow; }

Highlight terms

Call the highlight function with the text to highlight. To highlight all occurrences of “foo” (case-insensitive) in all li elements, use this:

$("li").highlight("foo", false);

To highlight all occurrences of “selection” case- and accent-insensitive (i.e. lenient) in all li elements use this:

$("li").highlight("selection", true);

Remove highlighting

The highlight can be removed from any element with the removeHighlight function. In this example all highlights under the element with the ID content are removed.

$("#content").removeHighlight();

Let me know how you like it!

18 thoughts on “jQuery highlight”

  1. Hello very nice plugin 😉
    but i have a question
    how to add class to a parent of span.highlight
    exemple add class to the li
    ul li div span.highlight

    Reply

  2. Thank you so much for nice working.

    But I have a problem, I must highlight my search page with my country language, Vietnamese, and some special character is not highlighted, for example: ‘Nội’ will not be highlighted if I search for keyword ‘noi’.

    Can you guide me to build a ‘charToAccentedCharClassMap’ variable for me, because I’m just beginner in jquery, I cannot understand what content of that variable represents. Thank you again.

    Reply

  5. This becomes unstable when the result set it operates on becomes big. I am using it to highlight search result of almost 50 results and browser stops responding (IE8 and Firefox both)

    Reply

      1. Marcel,
        I currently do not have a public URL, but I will try to reproduce this scenario and send you the link.

        Thanks!

        Reply

  6. Hi Marcel,

    There is an problem to highlight an word when the html has some special chars like "­"(Soft hyphen);
    example:
    “Os ser­­viços do Pla­no 1 da As­sis­­tência …
    I found an solution, but would like to know your opinion about this problem;

    at line 34

    function setHighlight(node, pattern) {
  var skip = 0;
  // Do this only for text nodes. Else go find child nodes...
  if (node.nodeType == 3) {
    var index = 0;
    // If lenient then the pattern is expected to be a regexp.
    node.data = String(node.data).replace(/\u00AD/g,'');
    // my solution  u00AD = ­

    url with behavior: https://jsfiddle.net/ramseswd/sshzneqp/

    thanks

    Reply

          1. Thanks Marcel,

            this generic regexp solution is much better, but i discovered that i have to keep (soft hyphens) and the highlight, and with my solution i remove all soft hyphens definitely… I’ll keep trying here with your regexp;

            thanks again

  7. I am watching that it also highlighting within words also…
    For eg, if there is two words “highlight” and “falsehighlight”
    in this case it is highlighting both.

    Is there any way to highlight only words which begin with it?

    Reply

Leave a Reply