javascript - 使用正则表达式强调字符串中的多个关键字并替换

Question

我有一个具有字符串属性的对象数组，我使用正则表达式通过多个关键字搜索这些属性。例如，如果集合看起来像这样

collection = [
    {searchString: 'Troarn Lower Normandy France'},
    {searchString: 'Tröbitz Brandenburg Germany'},
    {searchString: 'Tröbnitz Thuringia Germany'},
    {searchString: 'Tröchtelborn Thuringia Germany'},
    {searchString: 'Trochtelfingen Baden-Württemberg Germany'},
    {searchString: 'Trockenborn-Wolfersdorf Thuringia Germany'},
    {searchString: 'Trodena Trentino-Alto Adige Italy'},
    {searchString: 'Trodica The Marches Italy'},
    {searchString: 'Trofaiach Styria Austria'},
    {searchString: 'Trofarello Piedmont Italy'}
];

我有一个文本字符串可以像这样搜索

text = 'tro france';

我通过拆分文本得到关键字

keywords = text.split(' ');

然后根据这些关键字构建一个正则表达式

regex = '';
for (i = 0; i < keywords.length; i++ ) {
    if (keywords[i] !== "" && keywords[i] !== undefined) {
        regex += "(?=(^|.*\\s)" + keywords[i] + ")";
    }
}
regex = new RegExp(regex, "i");

所以文本 'tro france' 会给这个正则表达式 /(?=(^|.*\s)tro)(?=(^|.*\s)france )/我 并将匹配集合中的第一项。 我会像这样搜索集合

for (i = 0; i < collection.length; i++) {
    if (collection[i].searchString.search(regex) !== -1) {

        // ... do stuff here

    }
}

但现在我想强调搜索字符串中的关键字。 例如，如果文本是“tro france”，我想要“tro”这个词 和“法国”在我显示结果的地方加下划线。我可以做这个 以一种简单的方式，但我不确定如何进行多场比赛和 更换。我已经有了一个，但只有在我不这样做的时候它才会起作用 一个空格并跳转到其他关键字。

例如，如果文本很简单且“不跳转”，但像 'Troarn Lo' 这样直接匹配，那么我可以像这样替换它

emphasized = new RegExp('('+text+'.*?)', 'i');
emphasized = collection[i]searchString.replace(emphasized, '<em>$1</em>');

但我对多个关键字部分一无所知。

所以如果文本是 'Tro Lo Nor Fra'，我可以将集合中的第一项与正则表达式匹配，但在那之后，我想像我所做的那样在这些关键字下划线以上，所有关键字除外。

我怎样才能做到这一点？

Answer 1

您可以将所有关键字组合成一个正则表达式。请注意，这将使 g 标志成为强制性的。

emphasized = new RegExp(keywords.join('|'), 'ig');
emphasized = collection[i].searchString.replace(emphasized, '<em>$&</em>');

请注意，这将突出显示每个关键字的每一次。另外，使用 <mark>而不是 <em> .并且关键字在与 RegExp 一起使用时应该进行转义。