简单的字符截取实现搜索匹配时的关键字高亮

效果图：

wxml文件：

<view  bindtap="wxSearchKeyTap" data-key="{{item}}" >
      {{item.before}}<text style='color:red'>{{item.middle}}</text>{{item.after}}
       //middl为匹配的关键字
</view>

js文件:

  //匹配库
  var __tipKeys =[...............];
  // 包含搜索关键字的数据
  var tipKeys = [];

  // 分割关键字
  var before="";
  var middle="";    //middle用于存储用户输入的关键字
  var after="";
  var Keyword = {"before":'',"middle":'',"after":''};

  if (inputValue && inputValue.length > 0) {    //判断用户是否输入
    for (var i = 0; i < __tipKeys.length; i++) {
      var mindKey = __tipKeys[i];
      var position = mindKey.indexOf(inputValue);
      // 包含字符串
      if (position != -1) {


        console.log("-----------------position:"+position)
        console.log("-------------------inputValue.length:" + inputValue.length);
        console.log("匹配字符串：--"+mindKey);

        before = mindKey.substring(0, position);
        console.log("前置字符串：--"+before);

        var end = position + inputValue.length;
        middle = mindKey.substring(position, end);
        console.log("匹配关键字：--"+middle);

        after = mindKey.substring(end);
        console.log("后置字符串：--" +after);
        
        //json赋值
        Keyword.before = before;
        Keyword.middle = middle;
        Keyword.after = after;

        tipKeys.push(Keyword);

      }
    }
  }