前言
相信大家都遇到过内容展示关键词高亮的需求，实现的方式也有很多种，例如：正则匹配关键词加标签包裹、让后台直接返回带着标签包裹着关键词的内容（这种方式太low了），接下来给大家介绍一款插件vue-word-highlighter。
1 安装
yarn add vue-word-highlighter
# or
npm install vue-word-highlighter
2 使用
<template>
<div>
<div class="wrap">
<el-input v-model="searchValue" placeholder="请输入关键词" />
<el-button type="primary" @click="search">搜索</el-button>
</div>
<div>关键词的个数：{{result.length}}</div>
<div>关键词的内容：{{result}}</div>
<br/>
<WordHighlighter
highlightClass="highlight"
:query="lightQuery"
:caseSensitive="false"
:splitBySpace="true"
@matches="lightEmit">
<div>
我小心翼翼的接近，怕你在梦中惊醒，我只是想轻轻的吻吻你，你别担心，我知道想要和你在一起并不容易，
我们来自不同的天和地，你总是感觉 和我一起，是漫无边际阴冷的恐惧，我真的好爱你，我愿意改变自己，
我愿意为你流浪在戈壁，只求你不要拒绝 不要离别，不要给我风雪，我真的好爱你，我愿意改变自己，
我愿意为你背负一身羊皮，只求你让我靠近 让我爱你，相偎相依，我确定我就是那一只披着羊皮的狼，
而你是我的猎物，是我嘴里的羔羊，我抛却同伴独自流浪，就是不愿别人把你分享，我确定这一辈子都会在你身旁，
带着火热的心，随你到任何地方，你让我痴 让我狂，爱你的嚎叫 还在山谷回荡，我确定你就是我心中如花的羔羊，
你是我的天使是我的梦想，我搂你在怀里，装进我的身体，让你我的血液 交融在一起，你确定看到，
我为你披上那温柔的羊皮，是一个男人无法表露脆弱的感情，我有多爱你 就有多少柔情，我相信这柔情，定能感动天地！
</div>
</WordHighlighter>
</div>
</template>
<script setup>
import {ref} from "vue";
import WordHighlighter from "vue-word-highlighter";
const searchValue = ref();
const lightQuery = ref();
const result = ref([]);
const search = () => {
lightQuery.value = searchValue.value;
};
const lightEmit = (e) => {
result.value = e
}
</script>
<style>
.wrap{
width:300px;
display:flex;
}
.highlight{
background-color: transparent;
color: red;
font-weight: bold;
}
</style>
效果展示
3 API
1.query
类型：String or RegExp
说明：搜索内容。
2.caseSensitive
类型：Boolean
默认值：false
说明：是否区分大小写。
3.splitBySpace
类型：Boolean
默认值：false
说明:是否区分变音符号，如 u 和 ü。
4.splitBySpace
类型：Boolean
默认值：false
说明：是否用空格分割字符串以使其成为搜索字符串，如果设置为false，则默认把搜索内容当成一个整体进行搜索；当 query 为正则时，splitBySpace 默认为 false。
5.highlightTag
类型：String
默认值：<mark/>
说明：标记搜索到的内容所包裹的标签。
6.highlightClass
类型：String or Object or Array
说明：给标记的内容添加 class，绑定语法类似于 vue。
7.highlightStyle
类型： String or Object or Array
说明:给标记的内容添加 class，绑定语法类似于 vue。
8.wrapperTag
类型：String
默认值：<span/>
说明：整个目标搜索区的容器标签。
9.wrapperClass
类型：String or Object or Array
说明：给目标搜索区的容器添加 class，绑定语法类似于 vue 。
10.textToHighlight
类型：String
默认值：v-slot:default
说明：目标搜索区的内容。
11.matches
说明：query 参数变化时触发，函数返回搜索到的内容。
回调参数：function(value:Array)
总结
到这里vue-word-highlighter使用就介绍完了，相信大家应该不陌生了，关注我，后续持续更新，快动手实操一下吧，眼会≠学会。 以上分享仅为自己的见解(不喜勿喷)，若有误或者你有更好的方法，欢迎来评论指出。
如果这篇文章对你来说有点作用，欢迎点赞、关注、收藏，避免在需要的时候找不到。
如果文中有错误，欢迎指正~
更多前端技能请关注公众号前端诡刺
