javascript - 使用 jQuery Tokeninput 时如何使匹配字符变为粗体+红色

Question

我正在使用 http://loopj.com/jquery-tokeninput/demo.html#formatting

我想让匹配的字符也变成红色，但找不到它们的 CSS 或 Javascript 片段。

他们的元素在 GitHub 上.

Answer 1

使用 chrome 开发者工具，我发现 jquery-tokeninput 正在格式化搜索结果，如下所示:

<ul style="display: block; overflow: hidden;">
    <li class="token-input-dropdown-item2-facebook">Trad<b>in</b>g Spouses</li>
    <li class="token-input-dropdown-item-facebook">T<b>in</b> Man</li>
</ul>

所以它没有使用 css 类来突出显示匹配的字符，而是手动将这些字符放入 <b> 中。标签。在 javascript 源文件中快速搜索后，我找到了这个函数:

// Highlight the query part of the search term
function highlight_term(value, term) {
    return value.replace(
      new RegExp(
        "(?![^&;]+;)(?!<[^<>]*)(" + regexp_escape(term) + ")(?![^<>]*>)(?![^&;]+;)",
        "gi"
      ), function(match, p1) {
        return "<b>" + escapeHTML(p1) + "</b>";
      }
    );
}

因此，我想只需要修改它就可以自定义匹配的字符样式。例如，您可以将返回的字符串更改为:

return '<b class="match">' + escapeHTML(p1) + '</b>';

并将您的样式应用于 b.match css 类。