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!


Click the buttons below to see what is highlighted:




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 terms

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

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

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.

Let me know how you like it!

6 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

  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.

Leave a Reply

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