javascript - 传递包含变量的 HTML 元素以替换函数

Question

我想用 <span style="background-color: yellow">SearchString</span> 替换“SearchString”在目标字符串中。

我的 SearchString 在这里是可变的，所以我该如何实现。

我试过的是-

var applyHighlighting = function (highlightableElements, productFilterKeyword) {
for(var i =0; i< highlightableElements.length; i++){
    var regexp = new RegExp(productFilterKeyword, 'ig');
    var replaceKeyWord = highlightableElements[i].innerHTML.match(regexp);
    highlightableElements[i].innerHTML = highlightableElements[i].innerHTML.replace(regexp, '<span style="background-color: yellow">replaceKeyWord</span>');
}

Answer 1

您可以使用 $& 来引用您的替换正则表达式:

highlightableElements[i].innerHTML = highlightableElements[i].innerHTML.replace(regexp, '<span style="background-color: yellow">$&</span>');

在此处查看更多信息:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter

---

这是一个还保存了原始字符串的实例(您可能已经忘记了):

var highlightableElements = document.getElementsByTagName('div');
for (var i = 0; i < highlightableElements.length; i++) {
  highlightableElements[i].origHTML = highlightableElements[i].innerHTML
}
var applyHighlighting = function(productFilterKeyword) {
  for (var i = 0; i < highlightableElements.length; i++) {
    highlightableElements[i].innerHTML = highlightableElements[i].origHTML;
    var regexp = new RegExp(productFilterKeyword, 'ig');
    highlightableElements[i].innerHTML = highlightableElements[i].innerHTML.replace(regexp, '<span style="background-color: yellow">$&</span>');
  }
}

<input onkeyup="applyHighlighting(this.value)">
<div>Some text here</div>
<div>And another HERE</div>