0

<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" を使用して異なるフレーズに対して同じコンテナーで関数を複数回実行しますが、各フレーズに異なるデータ セットを保存する必要があるためです。

4

1 に答える 1

0

このような何かがうまくいくはずです：

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

dataまたは、本当に JQueryメソッドを使用したい場合:

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);
            });
        });
    });
}
于 2012-10-13T21:19:07.340 に答える