js实现关键字匹配高亮显示

你的名字 2021-01-19 17:30 992阅读 0赞

**JS实现搜索关键字匹配高亮显示**

首先看效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Nzc3Nzcz_size_16_color_FFFFFF_t_70]  
**需求**：用户输入文字之后，调用后台接口查询匹配关键字（模糊搜索），并把匹配到的关键字进行高亮显示。

**实现思路**：将拿到的数据进行拆分，例如：用户输入“羽毛球“，接口返回数据“\{label:‘羽毛球手胶’\}”，需要把羽毛球三个字高亮展示，首先我们将数据进行拆分，使用indexOf找到是否存在“羽毛球“字符串，找到关键字之后进行存储，将带有关键字的部分全部删掉，继续匹配，知道匹配结束。

**代码实现**（代码为小程序代码，其他语言思路一致）：

matchingKeyFun() { 
    		let keyword = this.data.keyword;
    		// 添加测试数据
    		let arr = [
    			{  label: '羽毛球关键字提示' },
    			{  label: '关键字搜索匹配羽毛球' },
    			{  label: '羽毛球搜索' },
    			{  label: '羽毛球拍测试羽毛球服测试羽毛球' }
    		];
    		// 最后输出数组
    		let matchingKeys = [];
    		arr.forEach((item, index) => { 
    			let f = true, label = item.label;
    			matchingKeys[index] = [];
    			while (f) { 
    				// 找到当前位置
    				let position = label.indexOf(keyword);
    				if (position == -1) { 
    					f = false;
    					// 未匹配到关键字
    					matchingKeys[index].push({  label: label.substring(0, label.length) })
    				} else { 
    					// 匹配位置+关键字长度
    					let matchEnd = position + keyword.length;
    					// 非匹配中的关键字
    					matchingKeys[index].push({  label: label.substring(0, position) })
    					// 匹配中的关键字
    					matchingKeys[index].push({  label: label.substring(position, matchEnd), checked: true })
    					// 去掉匹配到文字，重新进行筛选
    					label = label.substring(matchEnd, label.length);
    					// 匹配到了末尾，不再继续匹配
    					if (!label && label.length < 1) { 
    						f = false;
    					}
    				}
    			}
    		})
    		this.setData({ 
    			matchingKeys: matchingKeys
    		})
    	},

**页面渲染**

<view class="matching-key-block">
          <view class="matching-item" wx:for="{ {matchingKeys}}" wx:key="~this" wx:for-item="arr">
            <view class="{ {item.checked?'match-color':''}}" wx:for="{ {arr}}" wx:key="~this">
              {
       { item.label || '' }}
            </view>
          </view>
        </view>

css部分就不过多描述

公司项目碰到了这个需求，记录一下，方便日后使用！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Nzc3Nzcz_size_16_color_FFFFFF_t_70]: /images/1611077422634.png