jQuery: Search, Find and Highlight using jQuery

jQuery in Action: Build 15 jQuery Projects

jQuery UI in Action: Build 9 jQuery UI Projects

Hands-On jQuery: jQuery Examples

Find all our Udemy courses here:

jQuery: Search, Find and Highlight using jQuery

Learn how to search, find and highlight some text using jQuery.

[CryptersInfotech]

If you have to search in multiple paragraphs, please rewrite the function as follows:
function searchHighlight(searchText)
{
if (searchText)
{

$("p").each(function(index, content){
var content = $(content).text(); var searchExp = new RegExp(searchText, "ig");
var matches = content.match(searchExp);
if (matches)
{
$(this).html(content.replace(searchExp, function(match){
return "<span class='highlight'>" + match + "</span>";
}));
}
})
}
else

}
Hope it helps.

[usamausman]

You use the way of coding is very difficult but jQuery coding is very easy and understandable.

[david]

Hello! Great video, really helpful. Is it possible to add a counter of the word input too?

[DrAcula-gisq]

great explanation. good job.
but what if the content is not comming from a paragraph <p> but from an textarea?
how is it possible to highlight the users textarea input?

[wanyoikedanny]

i also want to to search through headings and links, can you help?

[arnabsarkar]

It doesnt work when we search for a fullstop (.) rather it shows all the letters highlighted in a group of no of fullstops searched. If someone could help me by giving the regex exp to search fullstop as well as string.

[photoinshot]

This is a great tutorial, thanks. This code still works in 2020! Is there a way to get this to work on a paginated table?

[hidayatmansuri]

Thank you for your tutorial, it is quite helpful. I have done exactly as you have explained, but rather than highlighting text it is replacing with whole P elements over and over again as and when i type in search box. Would you be able to help me if I send my code over please

[pmig]

thanks for this video. I want to implement it in a web page, so it could search different paragraphs and titles. I think a simple modification of the jquery is enough but, when i search it becomes unresponsive. can you give some help pls

[illestothvisualz]

I tried it with click event instead of onkeyup, but it does not work. Do you have an idea why? Thank you.

[meenazanjumaurang]

hii madam i am trying to use ur code in my project but i am not getting will u send a code to me to include code in my project

[seinavt]

This whole lesson is completely unusable because by using the .html() function you strip all elements of their tags/classes/ids/etc, essentially wiping out ALL css styling and DOM structure on the page. So unless you're using this to search a plain text document, it's useless.