將數據添加到JQuery和Javascript中突出顯示的文本中

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