Js search for text on page and highlight not working

Asked Jul 14 '16 at 19:05

Active Jul 14 '16 at 19:33

Viewed 31 times

I've written a script that searches for a string on a page and scrolls to it. I'd like for it to highlight the instances of the string on the page as well but that part of the script isn't working.

Here's my code:

$("#search").click(function(){ 
    var thing = $("input#searchItem").val();
    $(window).scrollTop($(".content:contains('" + thing + "'):first").offset().top -83);

    $('.content').each(function(index, element) {
        $(this).find(thing).each(function(i) {
            this.html('<i class="found">' + thing + '</i>');
        });
    });
});

edited Jul 14 '16 at 19:33

asked Jul 14 '16 at 19:05

babusi

You're highlighting all `.content` elements, not just the ones that contain the search string. – Barmar Jul 14 '16 at 19:11
See http://stackoverflow.com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector for how to search case-insensitively. – Barmar Jul 14 '16 at 19:11
`$(this).find(thing)` won't work. The argument to `.find()` must be a selector, not a search string. – Barmar Jul 14 '16 at 19:12
1

might consider using a highlight plugin and make life simpler – charlietfl Jul 14 '16 at 19:29
Thanks for the help with the case sensitivity. That's sorted now @Barmar – babusi Jul 14 '16 at 19:29

Js search for text on page and highlight not working

0 Answers0