jQuery突出显示除href值之外的单词

Question

This answer works almost perfectly for my needs. The problem is that it will also match URL values in the href attribute of an a tag. So If I have:

<a href="/a-link-to-a-porsche-page">This is a link to a porsche page</a>

and use this selector:

$("a").highlight("porsche", "highlighted");

porsche gets matched in both the url and the link text. What can be done so that values of the href attribute are omitted?

Previously referenced answer for posterity:

jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp(str, "gi");

    return this.each(function () {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
};

Didn't know about jsfiddle. Here's a more complete example based on justkt's response: http://jsfiddle.net/Dzejms/L5Knh/1/

Answer 1

------edit------

a cursory search on google turned up this neat jquery plugin . the idea is the same as what is the other answer, but it uses recursion and regex to make it more efficient. check it out.

Answer 2

One option is to drill down to the children of each object to make sure that you aren't grabbing the DOM nodes in your innerHTML.

Here is a fairly inefficient example that uses recursion on the children of each matched object:

jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp(str, "gi");

    return this.each(function () {
        checkHighlight(this);
    });

    function checkHighlight(obj) {
        var children = $(obj).children();
        if(children.length == 0) {
            doHighlight(obj);
        } else {
            children.each(function() {
                checkHighlight(this);
            });
        }
    }

    function doHighlight(obj) {
        obj.innerHTML = obj.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    }
};

See it in action here .