实现匹配搜索词高亮（Vue3）

1.使用插件实现（ohlight）

(1).下载插件

// pnpm 
pnpm i ohlight
// npm
npm i ohlight
// yarn
yarn add ohlight

如果让选择版本就按照提示的版本选择

(2).基本使用

>1.(Vue3)的使用

首先在vite.config.js中加入以下代码：

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          //将所有包含短横线的标签作为自定义元素处理
          isCustomElement: (tag) => tag.includes("-"),
        },
      },
    }),
  ],
});

如果没用vite，那么在vue.config.js中加入以下代码：

//vue.config.js
module.exports = {
	chainWebpack:config => {
		config.module
			.rule('vue')
			.use('vue-loader')
			.tap(option => ({
				...options,
				compilerOptions:{
					//将所有以ion-开头的标签作为自定义元素处理
					isCustomElement:tag => tag.startsWith('ion-')
				}
			}))
	}
}

然后对于他的使用也很简单，如下：

<script setup>
import { oLight } from "ohlight";
import { ref, reactive } from "vue";

const value = ref();
const lightFont = reactive(["唱", "rap", "跳", "篮球"]);//高亮文字数据
let style = JSON.stringify({
  color: 'red',
  background: 'aliceblue',
  'font-style': 'oblique'
})
</script>
<template>
  <div>
    <input type="text" v-model="value" />
    <o-light :content="value" :keywords="lightFont.join(',')" :styles="style"></o-light>
  </div>
</template>

<style scoped></style>

下面是一些关于插件的属性

Api

属性

属性名	类型	描述	默认值
content	string	文本内容	-
keywords	string	关键词字符串，多个关键词使用'','隔开	-
styles	string	高亮关键字样式，仅支持序列化后的CSSStyleDeclaration对象；注：涉及到驼峰写法的需要改写成 - 连接；如：fontStyle 需要写成 font-style	-
stableTime	string ｜ number	防抖时间，单位：(ms)	200

事件

所有的事件内容均在event.detail中。

事件名	类型	描述	默认值
load	Function	该方法在组件绘制完成并挂载后触发，返回当前组件实例，内容在event.detail中，可供操作dom使用等	-
connectedCallback	Function	当自定义元素第一次被连接到文档 DOM 时被调用	-
disconnectedCallback	Function	当自定义元素与文档 DOM 断开连接时被调用	-
adoptedCallback	Function	当自定义元素被移动到新文档时被调用	-
attributeChangedCallback	Function	当自定义元素的一个属性被增加、移除或更改时被调用。	-

浏览器支持情况

chrome	edge	firefox	opera	safari
53+	79+	63+	40+	10+

当然，关于这个插件也可以去他的官网参照，链接放在这里了：

(高亮划词插件链接)[https://www.npmjs.com/package/ohlight]

2.自己实现一个方法

<script setup lang="ts">
import { reactive, ref, toRefs } from 'vue'
const activeObj = reactive({
    arrWords: ['唱', '跳', 'rap', '篮球']
})
const inputVal = ref('');
let { arrWords } = toRefs(activeObj);

const brightenKeyword = (val: any, keyword: any) => {
    const Reg = new RegExp(keyword, 'i');
    const res = val.join('').replace(Reg, `<span style="color: #f4ea2a;">${keyword}</span>`)
    return res;
}
</script>
<template>
    <div class="container">
        <input type="text" v-model="inputVal" />
        <div v-html="brightenKeyword(arrWords, inputVal)"> </div>
    </div>
</template>