在 html 中使用 javascript 突出显示搜索词

Question

这是我的场景；我有一个如下的 html，如何使用 Javascript 在结果中突出显示搜索词？

我的意思是当我输入：Ho -> HOME 的前 2 个字母将突出显示。 如果我搜索 HOME ：结果中的整个单词将突出显示。

Answer 1

这是一个非常基本的例子：

HTML

Search: <input id="test"/>
<ul id="results"></ul>

Javascript

var results = ["Result1 Description", "Result2 Description", "Result3 Description"];

$("#test").change(function(){
    $("#results").empty();
var searchTerm = $(this).val();


for(var i = 0; i < results.length; i++){
    if(results[i].indexOf(searchTerm) != -1){

        $("#results").append("<li>"+ results[i].replace(searchTerm, "<span class=\"wrap\">" + searchTerm + "</span>") + "</li>");
    }
}
});

工作示例http://jsfiddle.net/t3BZ6/

Answer 2

将搜索词包裹在一个跨度中（这是建议的解决方案）有两个主要缺点：

• 不能在 contentEditable 元素中使用
• 它改变了 DOM，从而禁止在 React、Angular 或 Vue 等前端框架中使用它

W3C 发布了突出显示搜索词的标准：CSS 自定义突出显示 API。它已在所有常青浏览器中实现（撰写本文时 Firefox 除外）。

这个想法是创建范围，并将这些范围添加到突出显示注册表。然后使用 CSS 设置突出显示内容的样式。这根本不会改变 DOM。

手动完成有点麻烦（范围 API 很棘手），但如果你可以使用外部库，那就简单了。假设您使用搜索输入的值

#search

并且您想要突出显示元素中的搜索词

#result

:

<script type="module">
import { highlightSearchTerm } from "https://cdn.jsdelivr.net/npm/[email protected]/src/index.js";
const search = document.getElementById("search");
search.addEventListener("input", () => {
    highlightSearchTerm({ search: search.value, selector: "#result" });
});
</script>

然后使用 CSS 设置突出显示样式：

::highlight(search) {
    background-color: yellow;
    color: black;
}

这是使用一个名为 highlight-search-term 的开源库，它与前端框架和 contentEditable 兼容。但它在文本区域中不起作用。