Sparky2019 commented on a Page, Highlight Keywords on Page with jQuery  -  Dec 19, 2019

Sweet little piece of code!! I have already added it to my site. A slight problem I found during 'testing' though...

keywords = keywords.replace(/\W/g, ''); // removes any spaces
var str = keywords.split(" "); // uses spaces to split

If you want to separate the keywords string by finding 'spaces' (which is what the second line does), remove the first line.

Sparky2019  -  Dec 19, 2019

Just a few little mods. If you want the highlighted text to be CaSe sEnsitiVe, and want to display a count of what is found, here is my little addition :)

function highlight_words(keywords, element) {
    if(keywords) {
        var st1 = 0; // for count
        var textNodes;
        var keywords;
        var str = keywords.split(" ");
        $(str).each(function() {
            var term = this;
            var textNodes = $(element).contents().filter(function() { return this.nodeType === 3 });
            textNodes.each(function() { 
                var content = $(this).text();
                var regex = new RegExp(term, "gi");
                var count = (content.match(regex) || []).length; // for count
                content = content.replace(regex, function(match) { // for case sensitive :)
                    return '<span class="highlight">' + matchCase(term, match) + '</span>';
                });
                $(this).replaceWith(content);
                st1=st1+count; // for count
            });
        });
        $('#st1').html(st1); // populates your count span/div
    }
}
function matchCase(text, pattern) {
    var result = '';
    for(var i = 0; i < text.length; i++) {
        var c = text.charAt(i);
        var p = pattern.charCodeAt(i);
        if(p >= 65 && p < 65 + 26) {
            result += c.toUpperCase();
        } else {
            result += c.toLowerCase();
        }
    }
    return result;
}
Sign in to comment

Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.