如何使用 Javascript 突出显示文本表单输入搜索

how to highlight text form input search with Javascript

提问人：Guar Dian 提问时间：11/2/2023 最后编辑：Guar Dian 更新时间：11/2/2023 访问量：56

问：

我有一个带有关键字搜索的 todoList，如何确保在输入关键字时，下面的内容会突出显示？

function keysSearch() {
    const inputSearchValue = inputSearch.value.trim().toUpperCase();
    const loadData = loadLocalStorageData();
    const filterSearch = loadData.filter(function (value) {
        if (inputSearchValue) {
            return value.task.toUpperCase().indexOf(inputSearchValue) !== -1
        } else {
            return loadData
        }
    });
    render(filterSearch);
}

enter image description here

JavaScript 搜索 亮点

评论

0赞 Ken Lee 11/2/2023
其中一种方法：简单地用于完成工作<mark>te</mark>st

答：

1赞 Afzal K. 11/2/2023 #1

可以使用 innerHTML 属性在匹配的文本周围添加 HTML 标记。还可以使用 replace 方法将匹配的文本替换为包装在具有特定类的标记中的相同文本。

function keysSearch() {
    const inputSearchValue = inputSearch.value.trim().toUpperCase();
    const loadData = loadLocalStorageData();
    const contentDiv = document.getElementById("content");
    const filterSearch = loadData.filter(function (value) {
      if (inputSearchValue) {

        value.task = value.task.replace(new RegExp(inputSearchValue, "gi"), (match) => `<span class="highlight">${match}</span>`)
        return value.task.toUpperCase().indexOf(inputSearchValue) !== -1
      } else {
        return loadData
      }
    });

    contentDiv.innerHTML = render(filterSearch);
}

您还需要为突出显示的文本添加一个 CSS 类

.highlight{
  background-color: yellow;
}

评论

0赞 Guar Dian 11/2/2023
哦，哇，它起作用了，我想了想，但不知道怎么写，非常感谢。

上一个：Safari 搜索栏以红色突出显示文本

下一个：突出显示当前数字