Question

我在网上找到了这个优秀的代码，通过用<SPAN>标签和用户定义的类包装来突出显示文本中的单词。我几次使用它来一次突出显示多个搜索而没有任何问题。

我想要做的是为此代码添加一个额外的功能，以便为使用JQuery的.data（）方法添加的每个标记添加更多数据。但功能是如此整洁和有效我无法找到我需要注入的地方！

我想要一个像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。它应该只为那些同时创建的标签添加span.data("dataName", data)。（并非容器中的所有类都带有“className”类。）因为我使用相同的“ClassName”对不同的短语多次在同一容器上运行该函数，但仍希望在每个短语上存储不同的数据集。

Answer 1

这样的事情可以解决问题：

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>";
            });
        });
    });
}

或者如果你真的想使用JQuery data方法：

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);
            });
        });
    });
}

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

1 个答案: