1

我正在使用 JQueryUI 的自动完成填充文本框。此字符串可以包含多个单词，我对其进行搜索并返回搜索结果。我已经完成了关于跨多个术语检索自动完成结果的文章，现在需要帮助在我的结果中加粗单词。

例如，输入“dog i”应该会产生以下结果（忽略 i 的错误间距），其中我的三个关键字是粗体的：

“那只狗 是棕色的。”

“那只棕色的 狗 是我的朋友。 ”

一般的解决方案似乎是使用 String.replace 和一个正则表达式，它为我的结果中的关键字添加了一些额外的 HTML 包装器。但是，问题是，因为我有多个关键字，我可能会遇到包装新添加的 HTML 内容的情况。继续上面的例子，“i”会导致狗的“重量”中的“i”被包裹起来：

     "The brown <span style='font-we<span style='font-weight:bold'>i</span>ght:bold'>dog</span>  <span style='font-weight:bold'>i</span>s my fr<span style='font-weight:bold'>i</span>end."

如何防止我的 HTML 被 HTML 重新包装？谢谢。

这是我的代码：

    var regex;
    for (var i = 0; i < item.keywords.length; i++) {
        regex = new RegExp(item.keywords[i], "i");
        display = display.replace(regex, "<span style='font-weight:bold'>" +
            item.keywords[i] + "</span>");
    }
4

1 回答 1

1 
var keywords = "dog i";
var text = "The brown dog i s my fr i end.";

var expression = $.map([keywords].concat(keywords.split(" ")), function(el) { 
  return "(?:" + el + ")";
}).join('|');

var regexp = new RegExp('(' + expression + ')', 'ig');
var filteredText = text.replace(regexp, '<span style="font-weight:bold">$1</span>');

演示。

于 2012-08-21T18:43:13.500 回答