Question

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

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

“狗我是一个棕色的狗。”

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

一般解决方案似乎是使用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>");
    }

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

<强> DEMO

在没有递归HTML包装的情况下，在JQuery UI Autocomplete中拼写多个单词

1 个答案: