Search jQuery

jQuery Forum

Using jQuery

kroll_rj

Problem using word search and highlight

in Using jQuery • 9 years ago

Hi! I was looking for a simple search and highlight code and I found this one:

$(function(){
function searchAndHighlight(searchTerm, selector) {
if(searchTerm) {
//var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only
//var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters
var selector = selector || "#bodyContainer"; //use body as selector if none provided
var searchTermRegEx = new RegExp(searchTerm,"ig");
var matches = $(selector).text().match(searchTermRegEx);
if(matches) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights
$(selector).html($(selector).html().replace(searchTermRegEx, ""+searchTerm+""));
$('.match:first').addClass('highlighted');
$('#next').on('click',i=1, function()
{ $('.match').removeClass('highlighted'); $('.match').eq(i).addClass('highlighted');
if( i >= $('.match').length -1) {
i=0;
}
i=i+1;
});
if($('.highlighted:first').length) { //if match found, scroll to where the first one appears
$(window).scrollTop($('.highlighted:first').position().top);
}
return true;
}
}
return false;
}
$(document).ready(function() {
$('#search-button').on("click",function() {
if(!searchAndHighlight($('#search-term').val())) {
alert("No results found");
}
});
});
});//]]>

It works fine when the url is not the same as the link description, but when they are, it adds the class to both url and link description, and the url gets broken.

Something like this:

<a href="http://mywebsite.com/tagged/back">back</a>

Here's an example page.

Can somebody please help me? I've tried many solutions but none has worked. thanks in advance!

Replies(4)

jakecigar

Re: Problem using word search and highlight

9 years ago

It’s too simple!

$(selector).html($(selector).html().replace(searchTermRegEx, ""+searchTerm+""));

destroys the links.

You would have to loop through the nodes to find the ones with the matching text. Something like…

$(selector).find("a").filter(function(){
return $(this).text().match(searchTermRegEx)
}).addclass("match")

JΛ̊KE

kroll_rj

Re: Problem using word search and highlight

9 years ago

I didn't work. I've changed it to:

var matches = $(selector).text().match(searchTermRegEx);
if(matches) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights
//$(selector).html($(selector).html().replace(searchTermRegEx, ""+searchTerm+""));
$(selector).find("a").filter(function(){return $(this).text().match(searchTermRegEx)}).addclass("match");
$('.match:first').addClass('highlighted');
$('#next').on('click',i=1, function()
{ $('.match').removeClass('highlighted'); $('.match').eq(i).addClass('highlighted');
if( i >= $('.match').length -1) {
i=0;
}
i=i+1;
});

What am I doing wrong? That example page it's now with the code above if you want to test it. Sorry, I've been working on this for the past 12 hours, I can't seem to find what's going on.