1

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

我的代码看起来像这样

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 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/
4

2 回答 2

2

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

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

演示

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

您绝对应该在字符串中转义特殊的正则表达式字符：如何使用 javascript 转义正则表达式特殊字符？.

于 2013-01-02T15:12:34.487 回答
0

在每次搜索之前，我建议每次都获取（或保存）原始搜索字符串。例如，在您当前的情况下，这意味着您可以将所有 '<strong>' 和 '</strong>' 标记替换为 ''。这将有助于使您的正则表达式保持简单，特别是如果您决定在将来添加其他 html 标记和格式。

于 2013-01-02T15:03:00.500 回答