前言

最近做了一个查找的需求，在输入框输入查找文本，在下面的树状结构中高亮出搜索的label，并附带着上一个、下一个功能，下面我们来看下具体的实现过程。

查找

查找功能的实现可以分为两步：

1. 匹配，我们要先匹配到满足搜索文本的label。字符串的匹配有好几种方法，比如includes方法，正则表达式，这里我们采用正则表示式，正则能够满足更加复杂的匹配逻辑。
2. 样式，匹配到的文本需要高亮，并且当前所在的label也要跟其他label区分开，这些都需要样式的支持。 思路已经梳理清楚，接下来我们来实现，简单写一个静态页面：

当我们输入文本的时候会出现匹配的个数与下标，点击上一个、下一个下标会跟着变动。

接下来我们就要把匹配、上一个、下一个交互加上，前面提到了匹配是要用到正则，这个很简单，我们就用test方法将搜索文本当成匹配字符。 匹配到之后就是高亮效果，高亮简单写一个样式就可以，但是如何在label替换出来呢？我们使用replace方法将label中匹配到的文本替换成有高亮样式的文本。所以label我们根据是否有搜索文本去展示，而且高亮样式也有两种，匹配到的样式跟选择匹配的样式，这些我们通过if else跟三目运算进行实现，具体的代码如下：

用户在输入文本的时候我们要实时获取filterData数据，所以我们需要用@input事件去过滤数据，用正则获取匹配的label，并且将匹配总数与下标赋值。

此时我们输入搜索文本，就能看到匹配效果：

橙色是当前所在的匹配文本，黄色为匹配出来的文本，最后我们完成上一个、下一个功能即可。这两个功能也很简单就是把下标进行对应加减，我们只需要进行首尾下标的判断，达到循环上/下一个的效果。

到此我们的查找功能就完成了，一般来说查找替换不分家，但是该查找功能如果想要附带替换就得跟后端商量写个接口了，不然前端替换后一刷新就回归原样了。而且该方法就是针对这种列表查询的，仔细检查会发现同一个label如果匹配到了多个搜索文本会算成一种，针对此情况，我们可以把过滤方法优化一下，将判定条件改为exec方法，exec返回一个匹配数组，该数组包含匹配文本、下标等数据。当正则有全局修饰符时，exec会对匹配文本进行多次匹配，匹配一次返回一次，直至返回null，我们可以通过while循环保存每次的匹配结果。 利用此方法我们可以获取正确的匹配总数，但是当前高亮样式还是以label为整体，所以该功能还是可以进一步优化的。

总结

查找功能就是利用字符replace方法结合正则做出来的，实例中是简单的list列表，如果换成树状列表就结合树状组件一些方法使用，查找方法本质是不变的。