我在文本框中使用JQueryUI的自动完成填充。这个字符串可以包含我搜索并返回搜索结果的多个单词。我已经完成了关于在这多个单词中检索自动完成结果的文章,现在需要帮助在结果中加粗单词。
例如,输入"dog i"应该会得到以下结果(忽略带有i的错误间距),其中我的三个关键字是粗体的:
"的狗i是一只棕色的。"
"棕色狗i是我的fri结束。"
一般的解决方案似乎是使用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 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>');
演示。