在JQuery UI自动完成中加粗多个单词，无需递归HTML包装

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

例如，键入“dog i”将产生以下结果（忽略与i之间的错误间距），其中我的三个关键字以粗体显示：

“那只狗是棕色的。”

“棕色的狗我我的fr我结束了。”

一般的解决方案似乎是使用String.replace和一个regex，它为我的结果中的关键字添加了一些额外的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>");
    }

var regex；
对于（变量i=0；i

var关键字=“狗i”；
var text=“这只棕色的狗是我的朋友。”；
变量表达式=$.map（[keywords].concat（keywords.split（“”）），函数（el）{
返回“（？：“+el+”）”；
}).加入（“|”）；
var regexp=new regexp（“（“+expression+”）”，“ig”）；
var filteredText=text.replace（regexp，$1'）；

var-keywords=“dog i”；
var text=“这只棕色的狗是我的朋友。”；
变量表达式=$.map（[keywords].concat（keywords.split（“”）），函数（el）{
返回“（？：“+el+”）”；
}).加入（“|”）；
var regexp=new regexp（“（“+expression+”）”，“ig”）；
var filteredText=text.replace（regexp，$1'）；

---

“棕色”与

“狗i”

有什么关系？如果键入的文本是错误的

“dog i”

@KevinB，那么为什么不在第一个字符串中加粗

“dog”

——谢谢你指出了这一点。复制修改后的字符串，在原始版本中尝试匹配，并保存在克隆字符串中。为什么html会重写你的代码，你会在替换函数中使用类似正则表达式字符串的html标记吗？你可能想检查一下，它有这个functionality@lynnyi：因此，当您搜索“dog i”时，就如同您分别搜索“dog”和“i”一样。

“brown”

与

“dog i”

有何关联？如果键入的文本是错误的

“dog i”

@KevinB，那么为什么不在第一个字符串中加粗

“dog”

——谢谢你指出了这一点。复制修改后的字符串，在原始版本中尝试匹配，并保存在克隆字符串中。为什么html会重写你的代码，你会在替换函数中使用类似正则表达式字符串的html标记吗？你可能想检查一下，它有这个functionality@lynnyi：所以当你搜索“dog i”时，就像你分别搜索“dog”和“i”一样？这正是我在寻找的，使用智能正则表达式的功能。只是一个后续问题，我理解（a | b | c）语法寻找这些备选方案中的任何一个。语法呢？很高兴我能帮上忙

（？：stuff）

是一个非捕获组，即它告诉正则表达式引擎不要捕获/保存组的内容。在这种情况下，这并不重要，但因为我们已经用

'（“+expression+”）”

捕获了外部组，所以也没有必要捕获内部组。这正是我在寻找的，使用智能正则表达式的功能。只是一个后续问题，我理解（a | b | c）语法寻找这些备选方案中的任何一个。语法呢？很高兴我能帮上忙

（？：stuff）

是一个非捕获组，即它告诉正则表达式引擎不要捕获/保存组的内容。在这种情况下，这并不重要，但是因为我们已经用

'（'+expression+'）捕获了外部组

，所以也没有必要捕获内部组。

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>');