在JQuery和Javascript中将数据添加到突出显示的文本中

Question

I found this excellent code online for highlighting words in text by wrapping then with <SPAN> tags and a user defined class. I use this a few times over for highlighting multiple searches at once without any problems.

What I want to do is add an extra feature to this code to add more data to each of the tags added using JQuery's .data() method. But the function is so tidy and efficient I cant find where I need to inject it!

I want a function like highlightJQueryText(elem, str, className, dataName, data)

highlightJQueryText: function (elem, str, className) {
            var regex = new RegExp(str, "gi");
            return elem.each(function () {
            $(this).contents().filter(function() {
                    return this.nodeType == 3 && regex.test(this.nodeValue);
                }).replaceWith(function() {
                        return (this.nodeValue || "").replace(regex, function(match) {
                        return "<span class=\"" + className + "\">" + match + "</span>";
                    });
                });
            });
        }

PS. it should add a span.data("dataName", data) only to those tags created at the same time. (Not everything in the container with the class "className".) Because I run the function on the same container multiple times for different phrases using the same "ClassName", but still want a different set of data stored on each phrase.

Answer 1

Something like this should do the trick :

highlightJQueryText: function (elem, str, className, dataName, data) {
    var regex = new RegExp(str, "gi");
    return elem.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<span data-"+dataName+"=\""+data+"\" \
                              class=\""+className+"\">"+match+"</span>";
            });
        });
    });
}

or if you really want to use the JQuery data method :

highlightJQueryText: function (elem, str, className, dataName, data) {
    var regex = new RegExp(str, "gi");
    return elem.each(function () {
    $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return $("<span class=\""+className+"\">"+match+"</span>")
                    .data(dataName, data);
            });
        });
    });
}