Question

我想在targetString中用<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">' + replaceKeyWord + '</span>');
}

这应该有希望解决你遇到的任何问题。

严格地说，您实际上可以显着降低复杂性并且只需执行此操作：

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

如果您所做的只是在现有单词周围添加html，则无需计算替换关键字。

Answer 2

您可以使用$&来引用替代正则表达式：

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>

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

2 个答案: