微信小程序关键字高亮实现-逐梦个人博客

最近要在小程序中实现一个简单的搜索功能，整个实现很简单，用户输入关键词后调后端接口获取结果，然后展示，但是展示的时候需要高亮关键词，在web页面中我们可以通过将关键词替换为标签包裹的html字符串，然后在给便签样式来实现，抱着试试看的想法，试着将关键词换成了微信小程序标签包裹的字符串，大致代码如下：

const newStr = str.replace(keyword, <text class="key">${keyword}</text>);

结果一渲染，text标签直接以文本形式显示出来了，此路不通，只能另想他法，经过一番探究，发现我们可以通过将结果字符串根据当前的搜索词划分为数组来进行，具体又有2种实现，下面分别介绍一下：

1、该方法运用了递归，代码量较多，但是比较好理解。

首先我们需要先实现一个划分关键词的方法：

function hilight_word(str, keyword) {    
  const idx = str.indexOf(keyword), t = [];


  if (idx !== -1) {
    if (idx == 0) {
      t =this.hilight_word(str.substr(keyword.length)， keyword);
      t.unshift({ isKeyword: true, value: keyword });
      return t;
    } else if (idx > 0) {
      t =this.hilight_word(str.substr(idx), keyword);
      t.unshift({ isKeyword: false, value: str.substring(0, idx) });
      return t;
    }
  }
  return [{ isKeyword: false, value: str }];
}

然后通过上面实现的方法来划分得到显示内容的数组：

const keyword = '测试';
const str = '我是一段测试文本';

const result = hilight_word(str, keyword);

最后在wxml中渲染：

<view class="result">
  <block wx:for="{{result}}" wx:key="index">
    <text wx:if="{{item.isKeyword == true}}" style="color:red;">{{item.value}}</text>               
    <text wx:else>{{item.value}}</text>
   </block>     
</view>

2、通过正则表达式直接划分关键词数组，此方法代码量较少，但是需要对正则表达式有一定的了解。

这里直接通过正则表达式划分结果：

const keyword = '测试';
const str = '我是一段测试文本';
const reg = RegExp(`(?<=${keyword})|(?=${keyword})`);

const result = str.split(str);

最后在wxml中渲染：

<view class="result">
  <block wx:for="{{result}}" wx:key="index" wx:for-item="str">
    <text wx:if="{{str == keyword}}" style="color:red;">{{str}}</text>               
    <text wx:else>{{str}}</text>
   </block>     
</view>

这里的正则表达式主要使用了正向预查询和负向预查询，不懂的可以自行百度。

上面的2中方法都可以实现关键词高亮，具体选择哪种，你可以看自己对哪种比较熟悉。

注：上面js部分的代码只是演示代码，不能迁移到小程序中运行，请自行修改。