Question

这是我的代码

replaced.replace(new RegExp(item, 'i'), "<span class='has-background-primary'>$&</span>");

它突出显示搜索到的术语。但是，如果我第二次运行它，例如搜索。 “ back”，它会做一些愚蠢的事情，例如替换标记类中的字符串。我该怎么做才能防止这种情况？

Answer 1

“文字”解决方案是匹配您要跳过的标签，然后在其他任何上下文中匹配关键字，并在匹配后检查您的术语或标签是否匹配，并相应地替换：

var regex = new RegExp("(<span class='has-background-primary'>[^]*?</span>)|"+item.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi');
var result = replaced.replace(regex, function ($0, $1) {
    return $1 ? $0 : "<span class='has-background-primary'>" + $0 + "</span>";
});

说，您的商品为house。因此，正则表达式看起来像/(<span class='has-background-primary'>[^]*?</span>)|house/gi。它将匹配并捕获<span class='has-background-primary'>，尽可能少的0个字符（使用[^]*?），然后捕获</span>，否则匹配关键字。如果组1匹配，则匹配项将被粘贴回原样，否则，它将被新的span标签包裹。

请注意，建议将escape your literal strings用作RegExp模式，因此，添加了.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')。

另一种想法是根据搜索条件动态构建模式，例如

var search = ['abc', 'abcde', 'xyz'];
search.sort(function(a, b){
  return b.length - a.length;
});
var rx = new RegExp(search.map(function(m) { 
    return m.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');}
  ).join("|"), "gi"); // => /abcde|abc|xyz/gi
var result = replaced.replace(rx, "<span class='has-background-primary'>$&</span>"));

由于您的替换组未锚定，并且搜索词可能代表另一个术语的子集，因此您应按长度按降序对搜索词进行排序。

然后，在转义每个值的同时构建替换，不要忘记这里的g修饰符。

Answer 2

我不确定您要查找的内容是否与以下修改后的代码类似： replace.replace（new RegExp（item，'i'），“ $＆”。indexOf（“>”））;

这应确保html标记不受影响

忽略regexp中的html标签

2 个答案: