Highlight Searched Keyword

Asked Jul 09 '19 at 13:22

Active Jul 11 '19 at 13:51

Viewed 63 times

I am highlighting my searched keyword - however it searches the HTML so if I have something like

<a href="espn.com?id=456">espn</a>

and search on 456 - it finds it - I don't want that.

This is what I am using

function highlightOnly(text) {
    $('#' + view + ' td').each(function(i, e) {
        var $e = $(e);
        $e.html($(e).html().split(text).join('<span class="matching">' + text + '</span>'));
    })
}

$('.matching').replaceWith(function() {
    return this.innerText;
});

highlightOnly($('#txtSearch').val().toUpperCase());

You can see original fiddle here Search Keyword Highlighted

edited Jul 11 '19 at 13:51

barbsan

3,418
11
21
28

asked Jul 09 '19 at 13:22

Ronald

you are searching for td html. You should parse the html to get just the link and highlights them – Giacomo M Jul 09 '19 at 13:24
Ronald barbsan - Instead of parsing each element you can parse the text with the elements. replace below code and try. $e.html($(e).html().text().split(text).join('' + text + '')); – ganesh deshmukh Jul 11 '19 at 14:00
@ganesh deshmukh - did not work – Ronald Jul 15 '19 at 13:04

Highlight Searched Keyword

0 Answers0