微信小程式實現全域性搜尋程式碼高亮

需求

最近在做微信小程式的時候，需要實現在搜尋框的輸入內容的時候實現全域性匹配實現高亮效果，目前的思路是，遞迴後臺來返回的資料，並將物件的value值替換為需要的dom節點，並且通過rich-text來實現，高亮效果。

思路

在實現的過程中主要考慮，不同型別的資料結構，過濾掉特殊符號，url這些基本需求；同時在實現的過程中每次都要去處理最原始的資料，這就需要考慮到物件的深拷貝問題，目前所採用的方法是通過JSON.parse(JSON.stringify(str))來處理，因為在這個全域性搜尋的專案中不太會用到函式這些物件。最後通過replace方法來處理這些目標字串。

截圖

程式碼

wxml:

<view class='homePage'>
    <input bindinput="bindKeyInput"></input>
    <view wx:for="{{newJson}}" wx:for-item='item' wx:key>
        <rich-text nodes="{{item.name}}"></rich-text>   
        <rich-text nodes="{{item.address}}"></rich-text>   
        <rich-text nodes="{{item.age}}"></rich-text>
        <view wx:if="{{item.aihao}}" wx:for="{{item.aihao}}" wx:for-item='sitem' wx:key>
            <rich-text nodes="{{sitem}}"></rich-text>   
        </view>
    </view>
</view>
複製程式碼

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: '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 "<span style='color:red'>" + that.data.tempText + "</span>"
                    }))
                } 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 "<span style='color:red'>" + that.data.tempText + "</span>"
                })
            }
        }
    },
    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
        })
    }

})


複製程式碼