Question

In the “dev function” below, I’m trying to convert the string to lowercase to perform a lowercase to lowercase comparison between the string in the “html” variable and the contents of the span tags.

I must be doing something wrong on the dev function when attempting to convert the span to lowercase, since the highlight class does not appear to be attaching…

var html = jQuery('#content').html().toLowerCase();

    //existing function works when the span is preset to lowercase
    jQuery(".my_kw").find("span").filter(function() {
        return html.indexOf(jQuery(this).html()) != -1;
        }).each(function() {
            jQuery(this).addClass('highlight');
        });
    }

    //dev function. Trying to allow for spans to be mixed case, and force to lowercase only for comparison
    jQuery(".my_kw").find("span").filter(function() {
        var kw = jQuery(this).toLowerCase();
        return html.indexOf(kw.html()) != -1;
        }).each(function() {
            jQuery(this).addClass('highlight');
        });
    }

Answer 1

I think you’re missing a call to .html()

Consider your first call:

return html.indexOf(jQuery(this).html()) != -1;

and your second:

var kw = jQuery(this).toLowerCase();

That is, you probably want:

var kw = jQuery(this).html().toLowerCase();
return html.indexOf(kw) != -1;