javascript - 正则表达式替换 html 标签外的文本

Question

我正在开发一个自动完成组件，它会突出显示所有出现的搜索文本。我所做的是按单词分解输入文本，并将这些单词的每一次出现都包装成一个

我的代码是这样的

inputText = 'marriott st';
text = "Marriott east side";
textSearch = inputText.split(' ');
for (var i in textSearch) {
  var regexSearch = new RegExp('(?!<\/?strong>)' + textSearch[i]), "i");
  var textReplaced = regexSearch.exec(text);
  text = text.replace(regexSearch, '< strong>' + textReplaced + '< /strong>');
}

例如，给出结果:“marriott east side”

和输入文本:“marriott st”

我应该得到

  <strong>marriot< /strong > ea < strong >st < /strong > side

我得到了

  <<strong>st</strong>rong>marriot</<strong>st </strong>rong>ea<<strong>st</strong> rong>s</strong> side

有什么想法可以改进我的正则表达式，以避免在 html 标签内出现吗？谢谢

   /(?!<\/?strong>)st/

Answer 1

我会一次性处理字符串。您可以从搜索字符串中创建一个正则表达式:

var search_pattern = '(' + inputText.replace(/\s+/g, '|') + ')';
// `search_pattern` is now `(marriot|st)`
text = text.replace(RegExp(search_pattern, 'gi'), '<strong>$1</strong>');

DEMO

您甚至可以先拆分搜索字符串，按长度对单词进行排序，然后组合它们，以便为较长的匹配项提供更高的优先级。

您绝对应该转义字符串中的特殊正则表达式字符:How to escape regular expression special characters using javascript? .