Question

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

};

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

此时，有一个问题问题是结果在转向搜索时会发生变化。

就像['spun gold', 'gold', 'apple']一样好，
但就像['gold', 'spun gold', 'apple']是ng。

如果先执行gold => gold，则 spun gold => spun gold会出问题（自gold第一次更改为gold以来。）

有更好的方法吗？

编辑：

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

Answer 1

我认为我看到了问题：一个替代品正在弄乱前一个，因为它们共享一个共同的子串。

执行单个替换，将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>");
});

N.B。您可能需要在.join('|')之前引用数组元素，以防止特殊字符破坏正则表达式。（例如：relation = ['foo', 'bar?']）。方法如下：Escape string for use in Javascript regex

我想在Javascript / jQuery中改进搜索替换功能

1 个答案: