前言： 这几天在项目中遇见了须要将用户在搜索框中输入的文字高亮的疗效，思考了许久，暂时没有想到更高贵的解决方法，于是采用了最简单的一种思路来实现，特来记录一下。
一. 需求的场景我接手的这个需求须要和前端搭配，前端须要依照用户在搜索框中输入的关键词去恳求数据库，后端会依照关键词检索出相关文章的内容返回给我（字符串方式）。十分类似于下边的这些疗效。
这里对于我们后端来讲，主要的目的就是怎样正确的处理按下回车后，后端返回给我的那些字符串。二. 理清思路首先我们须要清晰的晓得，如何修改一个文字的款式？最简单的方式就是加类名。
下面是疗效
假设现今前端返回给我们下边这样一段文字。
现在的需求是把 写博客 这三个字用高亮去展示。
如果不考虑实现的可行性，你是否第一时间能联想到这样的写法呢？
效果如下
我们发觉，这种思路是十分可行的！！！那么现今的问题就弄成了，如何动态将一段字符串处理成关键词被带类名的 span 标签包裹的方式。说到了字符串的替换，那肯定第一时间会想到 String.replace 。
在这儿我们须要非常非常注意！！replace 的匹配模式是一个字符串格式的话，那么它仅只会替换匹配的第一个符合的字符，而不会全员替换。什么意思呢？我们思索下边的代码。
我们虽然期望 result 的值是将数字 1 全部替换为数字 9 的输出结果。也就是999 222 333。而实际的输出结果却是下边的：
输出结果为 911 222 333，它只修改了第一项，这样就造成了一个问题，我们只会替换第一个关键词。
如何解决呢？这里须要将第一个参数由字符串变更为正则表达式。这里我直接写答案，因为正则这个东西不是三言两语能讲清楚的，需要读者自行查阅 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"
这样就好了吗？没错这样就是全局匹配替换了，让我们测试一下。
我们更换为更接近真实数据的一段字符串测试一下。我们马上要把昨天全局替换成今天
输出结果为：
嗯，很完美。三. 替换为 span 包裹的数据那我们沿着这个思路，马上可以想到我可以写一个函数，专门按照关键词参数去替换关键词。
我们马上测试一下，看看疗效。
输出为
3.呀，它似乎把 span 当成字符串渲染了，这种情况如何解决？别着急，非常简单。
四. v-html 指令让我们先看一下官方是怎样解释这个指令的。
这里重点须要看这句话。
那么我们就可以直接这样写。
这里解释一下，主要是因为 v-html 指令期盼绑定一个字符串，而我们的 highLightWord 的返回值刚好是字符串格式的数据，所以才可以像前面这样写。
让我们看一下疗效:
好像没有哪些用，怎么回事呢？我直接出炉答案，这个组件的 style 标签不容许使用局域的，只能使用全局的。（具体缘由希望读者自己去深入研究一下）
6.再看一下确实早已达到我们的关键字高亮疗效了
总结
总觉得这些方案不是非常甜美，如果有高手可以在评论区指导另一种写作方案，我们共同讨论不失为一种乐趣～
