乐趣区

关于前端:Vue3-中实现关键字高亮的一种思路

jiezi

前言： 这几天在我的项目中遇到了须要将用户在搜寻框中输出的文字高亮的成果，思考了很久，临时没有想到更优雅的解决形式，于是采纳了最简略的一种思路来实现，特来记录一下。

一. 需要的场景

  1. 我接手的这个需要须要和后端搭配，前端须要依据用户在搜寻框🔍中输出的关键词去申请数据库，后端会依据关键词检索出相干文章的内容返回给我（字符串模式）。非常相似于上面的这种成果。
  2. 这里对于咱们前端来讲，次要的目标就是如何正确的解决按下回车后，后端返回给我的这些字符串。

二. 理清思路

  1. 首先咱们须要清晰的晓得，如何更改一个文字的款式？最简略的办法就是加类名。

    上面是成果

  2. 假如当初后端返回给咱们上面这样一段文字。

    当初的需要是把 写博客 这三个字用高亮去展现。

  3. 如果不思考实现的可行性，你是否第一工夫能联想到这样的写法呢？

    成果如下

  4. 咱们发现，这种思路是十分可行的！！！那么当初的问题就变成了，如何动静将一段 字符串 解决成关键词被带类名的 span 标签包裹的模式。
  5. 说到了字符串的替换，那必定第一工夫会想到 String.replace。
  6. 在这里咱们须要特地特地留神！！replace 的匹配模式是一个字符串格局的话，那么它仅只会替换匹配的第一个合乎的字符，而不会全员替换。什么意思呢？咱们思考上面的代码。

    咱们其实冀望 result 的值是将数字 1 全副替换为数字 9 的输入后果。也就是999 222 333。而理论的输入后果却是上面的：

    输入后果为 911 222 333，它只更改了第一项，这样就导致了一个问题，咱们只会替换第一个关键词。

  7. 如何解决呢？这里须要将第一个参数由字符串变更为正则表达式。这里我间接写答案，因为正则这个货色不是喋喋不休能讲清楚的，须要读者自行查阅 MDN。

    为了避免有的小伙伴看不清楚，我把源码贴到了上面。

    const name = "111 222 333";
const _reg = new RegExp("1", "g");
const result = name.replace(_reg, "9");
console.log("result", result); // 冀望："999 222 333"
  8. 这样就好了吗？没错这样就是全局匹配替换了，让咱们测试一下。
  9. 咱们更换为更靠近实在数据的一段字符串测试一下。咱们马上要把 明天 全局替换成 昨天

    输入后果为：

    嗯，很完满。

三. 替换为 span 包裹的数据

  1. 那咱们顺着这个思路，马上能够想到我能够写一个函数，专门依据关键词参数去替换关键词。
  2. 咱们马上测试一下，看看成果。

    输入为

3. 呀，它如同把 span 当成字符串渲染了，这种状况怎么解决？别着急，非常简单。

四. v-html 指令

  1. 让咱们先看一下官网是如何解释这个指令的。
  2. 这里重点须要看这句话。
  3. 那么咱们就能够间接这样写。
  4. 这里解释一下，次要是因为 v-html 指令期待绑定一个 字符串 ，而咱们的 highLightWord 的返回值正好是 字符串 格局的数据，所以才能够像下面这样写。
  5. 让咱们看一下成果:

    如同没有什么用，怎么回事呢？我间接揭晓答案，这个组件的 style 标签不容许应用局域的，只能应用全局的。（具体起因心愿读者本人去深入研究一下）

6. 再看一下的确曾经达到咱们的关键字高亮成果了

总结

总感觉这种计划不是特地优雅🤔，如果有大神能够在评论区领导另一种写作计划，咱们独特探讨不失为一种乐趣～

退出移动版