Vue3怎么实现文章内容中多个关键词标记高亮显示-Vue.js-PHP中文网

具体实现过程

vue-word-highlighter 是一个小众的包，并不出名，github 上也只会百星出头，不过能用能跑就行，合适才是最好的，小编最近信奉一句话"程序和你一个能跑就行"。

vue-word-highlighter 支持 Vue3 和 Vue2，不过 Vue2 版本是通过 vue-demi 构建的，对 vue-demi 不熟悉的小伙伴还是别用吧(✪ω✪)，咱有一说一，用 Vue2 来完成该需求，有其他很多包可以推荐。

至于为什么，正如它文档介绍的：

Vue3怎么实现文章内容中多个关键词标记高亮显示

基本使用

它的使用比较简单的，直接上代码：

白果AI论文

论文AI生成学术工具，真实文献，免费不限次生成论文大纲 10 秒生成逻辑框架，10 分钟产出初稿，智能适配 80+学科。支持嵌入图表公式与合规文献引用

下载

立即学习“前端免费学习笔记（深入）”；

Vue3怎么实现文章内容中多个关键词标记高亮显示

是不是超简单，下面贴一下它支持的一些 props 与事件，就又可以愉快的摸鱼了。

props

参数	类型	默认值	说明
query	String or RegExp	-	搜索内容。
caseSensitive	Boolean	false	是否区分大小写。
diacriticsSensitive	Boolean	false	是否区分变音符号，如 `u` 和 `ü`。
splitBySpace	Boolean	false	是否用空格分割字符串以使其成为搜索字符串，如果设置为`false`，则默认把搜索内容当成一个整体进行搜索；当 `query` 为正则时，`splitBySpace` 默认为 `false`。
highlightTag	String		标记搜索到的内容所包裹的标签。
highlightClass	String or Object or Array	-	给标记的内容添加 `class`，绑定语法类似于 `vue` 。
highlightStyle	String or Object or Array	-	同上。
wrapperTag	String		整个目标搜索区的容器标签。
wrapperClass	String or Object or Array	-	给目标搜索区的容器添加 `class`，绑定语法类似于 `vue` 。
textToHighlight	String	`v-slot:default`	目标搜索区的内容。

事件

事件名称	说明	回调参数
matches	`query` 参数变化时触发，函数返回搜索到的内容	`function(value:Array)`

原理过程

function fn(content, keywordArray) {
  if(keywordArray.length === 0) return;

  keywordArray.forEach(keyword => {
    if(keyword && content.indexOf(keyword) !== -1) {
      content = content.replace(new RegExp(keyword, 'g'), `${keyword}`);
    }
  });

  return content;
}