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

Question

我有一个带有关键字搜索的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);
}

Answer 1

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

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;
}