需求

最近在做微信小程序的时候，需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果，目前的思路是，递归后台来返回的数据，并将对象的value值替换为需要的dom节点，并且通过rich-text来实现，高亮效果。

思路

在实现的过程中主要考虑，不同类型的数据结构，过滤掉特殊符号，url这些基本需求；同时在实现的过程中每次都要去处理最原始的数据，这就需要考虑到对象的深拷贝问题，目前所采用的方法是通过JSON.parse(JSON.stringify(str))来处理，因为在这个全局搜索的项目中不太会用到函数这些对象。最后通过replace方法来处理这些目标字符串。

截图

代码

wxml:

js:

//index.js//index.jsconst app = getApp()Page({    data: {        homeUrl: '../index/index',        mineUrl: '../mine/mine',        newFillUrl: '../newFill/newFill',        historyUrl: '../historyData/historyData',        json: [{ name: '你是谁', age: 'awdqww\\k', address: 'auemnkjkifwh{\\efwfheffoewjowef', aihao: ['sdsd', 'sdfsd', 'sdsf'] }, { name: '98797', age: '6544656', address: 'https://www.baidu.com/' }],        newJson: '',        tempText: '',        showShadow: false,        chartNumber: 0,        newStr:''    },    /**     * 生命周期函数--监听页面加载     */    onLoad: function (options) {        this.setData({            newJson: this.data.json        })    },    haha: function () {        console.log('haha');        wx.navigateTo({            url: '../mine/mine',        })    },    digui: function (newJson, obj, key) {        var urlReg = new RegExp('(https ?|ftp | file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]')        var that = this;        var reg = that.data.tempText;        if (that.data.tempText == '.' || that.data.tempText == '\\' || that.data.tempText == '\?' || that.data.tempText == '\[' || that.data.tempText == '\]') {            reg = '\\' + that.data.tempText        }        var reg = new RegExp(reg, 'ig');        if (newJson.constructor == Array) {            newJson.forEach(function (item, index) {                if (item.constructor == String && !urlReg.test(item)) {                    obj[key].splice(index, 1, item.replace(reg, function (index) {                        if (that.data.newStr != ''){                            that.setData({                                chartNumber: (that.data.chartNumber + 1)                            })                        }                        return "" + that.data.tempText + ""                    }))                } else {                    that.digui(item, newJson);                }            });        } else if (newJson.constructor == Object) {            var json = {};            for (var key in newJson) {                json[key] = newJson;                that.digui(newJson[key], newJson, key);            }        } else if (newJson.constructor == String && !urlReg.test(newJson)) { // 这里做全局替换            if (key) {                obj[key] = newJson.replace(reg, function () {                    if (that.data.newStr != '') {                        that.setData({                            chartNumber: (that.data.chartNumber + 1)                        })                    }                    return "" + that.data.tempText + ""                })            }        }    },    showBgShadow: function (e) {        this.setData({            showShadow: e.detail.showBgShadow        })    },    bindKeyInput: function (e) {        var regChart = this.data.regChart;        var text = e.detail.value;        var newStr = '';        newStr = text.replace(/[\@\#\$\%\^\&\*\{\}\:\"\L\<\>\?\\\.]/, '')        this.setData({            tempText: newStr,            chartNumber: 0,            newStr: newStr        })        var newJson = JSON.parse(JSON.stringify(this.data.json));        this.digui(newJson);        this.setData({            newJson: newJson        })    }})