vue实现搜索关键词高亮（保姆级教程）

最新推荐文章于 2024-07-25 17:11:44 发布

东方睡衣

最新推荐文章于 2024-07-25 17:11:44 发布

阅读量806

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/web2022050903/article/details/126464898

版权

本文提供了一个Vue实现搜索关键词高亮的保姆级教程。通过正则表达式`exec`方法，提取关键字并分组，将传入的字符串按照规则进行切割，实现高亮效果。文章详细解释了匹配过程和提取关键字的逻辑。

摘要由CSDN通过智能技术生成

废话少说先上效果（左侧代码，右侧效果）

看到什么规律了吗？

没错！！这份代码就是依靠正则表达式来做出高亮效果，你负责传入str与reg，而函数则负责实现代码的高亮

结构部分如下

<template><div><span:class="index%2!==0?'hightLight':''"v-for="(item,index) in textData":key="index">{
  {item}}</span></div>
</template>

基本原理就是将传入的str按照正则的规则进行切割，偶数部分负责高亮，奇数部分负责正常显示

如：

str与reg分别为

let str = "高亮几个词语出来好不好";
let reg = /(高亮|词语)/g;

将该部分切割为如下数组

“高亮几个词语出来好不好” —》 [‘’, ‘高亮’, ‘几个’, ‘词语’, ‘出来好不好’] ----》

知道了基本原理，我们再来看一下代码

 let str = "高亮几个词语出来好不好";let reg = /(高亮|词语)/g;let result = {};let currentIndex = 0, returnData = [];while ((result = reg.exec(str

关注