0 
var target   = $(".target-text"),
    relation = ['spun gold', 'gold', 'apple'],
    len      = relation;

for (var i=0; i<len; i++) {

    var e = relation[i],
        re = new RegExp(e,"ig");

    if (e.length > 0) {
        target.html( target.html().replace(re, "<span class='hit'>$&</span>") );
    }

};

搜索到的字符被标签包围。

这时候，就有问题了。
问题是结果在轮到搜索时发生变化。

喜欢 a['spun gold', 'gold', 'apple']是可以的，
但喜欢 a['gold', 'spun gold', 'apple']是 ng。

如果gold => <span class='hit'>gold</span>先执行，
spun gold => <span class='hit'>spun gold</span>会出错。
（自从第一次gold更改为。）<span class='hit'>gold</span>

有没有更好的办法？

编辑：

作为条件，搜索不仅是英文。

4

1 回答 1

3

我想我看到了问题：一个替代品弄乱了前一个替代品，因为它们共享一个公共子字符串。

relation通过在正则表达式中将术语组合成一个大“或”来执行单个替换：

var target   = $('.target-text'),
    relation = ['spun gold', 'gold', 'apple'],
    re = new RegExp(relation.join('|'), 'ig');

target.html(function (_, oldHtml) {
    return oldHtml.replace(re, "<span class='hit'>$&</span>");
});

注意，您可能需要在.join('|')ing 之前引用数组元素，以防止特殊字符破坏正则表达式。（例如：）relation = ['foo', 'bar?']。方法如下：转义字符串以在 Javascript 正则表达式中使用

于 2012-12-02T06:45:17.013 回答