搜索：输入字符高亮显示，多个关键字用空格隔开

1、封装公共方法

src\utils\util.js

/**
 * @description: 输入字符进行高亮显示
 * @param {String} text 需要关键字高亮的文本
 * @param {String} inputValue 输入的字符，多个关键字用空格隔开
 */

export const getHighlightedName = (text, inputValue) => {
  const searchTerms = inputValue.split(' ').filter((term) => term.trim() !== '') // 去掉空格或空字符串后需要高亮的关键词数组
  if (searchTerms.length === 0) return text // 没有有效的关键词,直接返回原始文本
  let highlightedName = text  // 遍历每个关键词进行替换  searchTerms.forEach((term) => {
    const regex = new RegExp(`(${term})`, 'gi') // 创建正则,全局匹配,忽略大小写
    highlightedName = highlightedName.replace(regex, '<span style="color: #005aff;">\$1</span>') // \$1 正则表达式中第一个捕获组（匹配到的词）
  })
  return highlightedName
}

2、使用方式

 <template #default="{ item }">
     <span v-html="getHighlightedName(item.value, searchValue)"></span>
 </template>

import { getHighlightedName } from '@/utils/util.js'