全文检索与高亮关键词匹配，用Replace就够了

本文是一篇笔者关于replace API的笔记，希望看完在项目中有所思考和帮助。,正文开始…,在开始正文之前，主要是利用字符串replace这个API,你将要了解以下几个知识。,1、字符串replace替换。,2、如何扩展elementUI组件源码支持下拉框关键字搜索高亮。,3、正则匹配对应结果，replace高阶用法。,比如，现在一个常用的下拉框，我需要搜索关键词模糊匹配，我们看下代码。,当我在el-select组件上添加filterable属性后，就可以关键词过滤了，但是只是过滤了，但是我想关键词高亮。,你会发现el-select显示的label并没有提供插槽或者其他方式去自定义显示label，源码里是直接显示的。,我们尝试修改扩展增强下这个option,于是想办法去修改currentLabel,但是你会发现你想让computed的currentLabel返回一个jsx貌似不太可能，因为渲染出来的会带标签，所以只能考虑重写render方法。,于是我们重写render,新建一个extendElement.js。,我们注意到我重写了Option这个组件，我们在install安装前就拦截这个组件，然后重写了Option，主要是在ElementUI注册前完成,jsx渲染标签的关键在于domPropsInnerHTML这个接口，如果在模版中我们就是使用v-html去代替。,我们发现在高亮关键字有用到这个hightText方法,主要支持关键词全匹配与部分匹配，默认全匹配。,在上面的一块代码中我们发现，非全匹配，我们就用到了replace这个方法，主要是替换匹配到的关键字，但是这个replace我们结合match,我们发现无法重复匹配。,假设aabbccaa需要高亮aa，如果用不借助数组或者正则方式处理，我们使用的是replace字符串匹配的方式，那么一旦匹配到就结束，所以借助了数组的方式做了一点取巧实现了全检索高亮。,看下最终的结果:,,replace高亮关键词基本就已经完成这个需求功能，我们重新看下官方MDNreplace[1]的解释。,replace()方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个[正则表达式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp “正则表达式”)，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。**如果pattern是字符串，则仅替换第一个匹配项。**,所以我们从这段解释中可以发现，当我们使用replace替换，如果pattern是字符串，则仅替换第一个匹配项。,但是我们发现匹配模式还可以是正则。,所以如果想全匹配，那么可以用正则来做。,所以我们也可以将我们上面的hightText方法改成下面这样。,官方的replace语法是这样的str.replace(regexp|substr, newSubStr|function) 也就是说replace的第一个参数是字符串或者正则，第二个参数是字符串或者一个函数。,我们看下第二次函数，对应的mactch与string是原数据，$1…$3是对应正则匹配的，如果我想把中间对应的数字换成其他的呢？,关于function的参数可以参考下面这个表,在业务中你也会经常看到这样的代码：,replace调用返回的是一个新字符串，所以可以继续调用replace方法,因为replace是挂载在String.prototype上的方法，所以所有字符串可以链式调用。,[1]replace： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace,[2]RegExp： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp,[3]code example： https://github.com/maicFir/lessonNote/tree/master/vue/05-keep-alive