JavaScript搜索关键字高亮

1、实现思路

1. 方案一：改变 dom 结构，影响性能；

• 根据关键字是否有值创建正则；
• 根据关键字过滤数据（或后端返回数据）
• 遍历数据每一项，使用replace函数，将每一项的中的关键字替换为Dom结构
• 页面渲染Dom结构（Vue中使用v-html）
• 设置高亮展示的样式
• 详情代码如下

2. 方案二：CSS Custom Highlight API，由于是新特性，存在兼容性问题。

2、参考代码

<script setup>
import {ref} from "vue";

const userNameSourceList = ['Alice', 'Bob', 'Charlie', 'David']
const searchValue = ref('')
const userNameList = ref(userNameSourceList)

/**
 * 搜索关键字高亮
 */
function searchUserName() {
  let reg;
  const key = searchValue.value;
  if (key) {
    reg = new RegExp(key, 'gi');
  }
  const searchedList = userNameSourceList.filter(item => item.includes(key))
  userNameList.value = searchedList.map(item => {
    if (reg) {
      item = item.replace(reg, match => `<span class="keyword-highlight">${match}</span>`)
    }
    return item;
  })
}
</script>

<template>
  <input type="text" v-model="searchValue" @input="searchUserName"/>
  <div v-for="item in userNameList" v-html="item"></div>
</template>

<style>
.keyword-highlight {
  color: red;
}
</style>