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

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

首先看效果

需求：用户输入文字之后，调用后台接口查询匹配关键字（模糊搜索），并把匹配到的关键字进行高亮显示。

实现思路：将拿到的数据进行拆分，例如：用户输入“羽毛球“，接口返回数据“{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部分就不过多描述

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