微信小程序实现全局搜索高亮

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

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

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

wxml:

js:

//index.js
//index.js
const app = getApp()

Page({
    data: {
        homeUrl: "../index/index",
        mineUrl: "../mine/mine",
        newFillUrl: "../newFill/newFill",
        historyUrl: "../historyData/historyData",
        json: [{ name: "你是谁", age: "awdqwwk", 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
        })
    }

})