小程序中搜索文字高亮显示

功能介绍：头部搜索框，输入搜索内容，然后在下方的段落中高亮展示检索到的匹配文字

如果你懒得看文章，那就直接用代码片段自己运行吧，代码链接：wechatide://minicode/MmTrDVmg6QY7

搜索关键词高亮.gif

具体实现方法是在别的提问下看到的思路，三段代码如下

<navigator>
    <text wx:for="{{motto}}" class="{{item == keyName ? 'gjz' : '' }}">{{item}}</text>
</navigator>

.gjz {
  color: #f00;
}

const getInf = (str, key)=> str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
 
Page({
  data: {
    keyName: '前端',
    motto: getInf('加油，前端开发，前端加油。', '前端')
  }
})

下边来写个实例吧

WXML

<view class="section">
    <view class="view-search">
        <input class="view-search-input" value="{{keyName}}" placeholder="输入搜索关键词" bindinput="bindInput" maxlength="11" />
    </view>
    <scroll-view class="scrollView" scroll-y>
        <view wx:for="{{listDataCopy}}" wx:key="*this">
            <view class='oneText'>
                <text wx:for="{{item.text}}" wx:key="{{index}}" class="{{item == keyName ? 'searchHigh' : '' }}">{{item}}</text>
            </view>
        </view>
    </scroll-view>
</view>

WXSS

.view-search {
  padding: 12rpx 30rpx;
  box-sizing: border-box;
  position: relative;
}
.view-search-input {
  height: 70rpx;
  line-height: 70rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 0px 70rpx 0px 20rpx;
  font-size: 32rpx;
}

.searchHigh {
  color: #ff0000;
}

.scrollView {
    height: 80vh;
    background-color: #F5F5F5;
    box-sizing: border-box;
}
.oneText {
    line-height: 50rpx;
    margin: 30rpx;
    text-align: center;
    color: #9B9B9B;
    font-size: 32rpx;
}
.currentText {
    color: #0099FF;
}

JS

//获取应用实例
const app = getApp();
const getInf = (str, key) => str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');

Page({
    data: {
        keyName: null,
        listData: [
            {"Id": "1","text": "徘徊着的  在路上的  你要走吗易碎的  骄傲着  那也曾是我的模样沸腾着的  不安着的  你要去哪谜一样的  沉默着的  故事你真的在听吗"},
            {"Id": "2","text": "我曾经跨过山和大海  也穿过人山人海我曾经拥有着一切     转眼都飘散如烟我曾经失落失望失掉所有方向直到看见平凡才是唯一的答案当你仍然  还在幻想  你的明天她会好吗  还是更烂  对我而言是另一天"},
            {"Id": "3","text": "我曾经毁了我的一切  只想永远地离开我曾经堕入无边黑暗   想挣扎无法自拔我曾经象你象他象那野草野花绝望着 渴望着 也哭也笑平凡着"},
            {"Id": "4","text": "向前走 就这么走   就算你被给过什么向前走 就这么走   就算你被夺走什么                                        向前走 就这么走   就算你会错过什么向前走 就这么走   就算你会"},
        ], // 内容原始数组
        listDataCopy: [
            { "Id": "1", "text": "徘徊着的  在路上的  你要走吗易碎的  骄傲着  那也曾是我的模样沸腾着的  不安着的  你要去哪谜一样的  沉默着的  故事你真的在听吗" },
            { "Id": "2", "text": "我曾经跨过山和大海  也穿过人山人海我曾经拥有着一切     转眼都飘散如烟我曾经失落失望失掉所有方向直到看见平凡才是唯一的答案当你仍然  还在幻想  你的明天她会好吗  还是更烂  对我而言是另一天" },
            { "Id": "3", "text": "我曾经毁了我的一切  只想永远地离开我曾经堕入无边黑暗   想挣扎无法自拔我曾经象你象他象那野草野花绝望着 渴望着 也哭也笑平凡着" },
            { "Id": "4", "text": "向前走 就这么走   就算你被给过什么向前走 就这么走   就算你被夺走什么                                        向前走 就这么走   就算你会错过什么向前走 就这么走   就算你会" },
        ], // 用来搜索的复制数组
        // 为什么要用两个数组就是，原始数组是不能改变的，我们每次输入关键字都要拿原始数组来处理，然后拆分成需要的数据去展示
    },

    onLoad: function (e) {
        var that = this;
        that.searchTap();
    },

    // 输入框正在输入
    bindInput: function (e) {
        var that = this;
        that.setData({
            keyName: that.trim(e.detail.value)
        })
        that.searchTap();
    },

    // 搜索关键字
    searchTap: function () {
        var that = this;
        var data = that.data.listData;
        var newData = that.data.listDataCopy;
        for (var i = 0; i < data.length; i++) {
            var dic = data[i];
            var newDic = newData[i];
            var text = dic["text"];
            newDic["text"] = getInf(text, that.data.keyName);
        }
        that.setData({
            listDataCopy: newData,
        })
    },

    // 去除首尾的空格
    trim: function (s) {
        return s.replace(/(^\s*)|(\s*$)/g, "");
    }
})

整个操作的精髓就是

const getInf = (str, key)=> str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');