El applet WeChat se da cuenta de la búsqueda global resaltada

Demanda

Recientemente, cuando se hace un applet WeChat, es necesario implementar una coincidencia global para lograr el efecto de resaltado al ingresar el cuadro de búsqueda. La idea actual es devolver recursivamente los datos de fondo y reemplazar el valor del objeto con el dom requerido Nodo, y a través de texto enriquecido para lograr, resaltar el efecto.

Ideas

En el proceso de implementación, se consideran los requisitos básicos de los diferentes tipos de estructuras de datos, el filtrado de símbolos y URL especiales. Al mismo tiempo, los datos más primitivos deben procesarse cada vez durante el proceso de implementación, que debe considerar la copia profunda del objeto El problema, el método actual es usar JSON.parse (JSON.stringify (str)) para tratar, porque en este proyecto de búsqueda global, es probable que estos objetos no se usen. Finalmente, estas cadenas de destino se procesan a través del método de reemplazo.

Captura de pantalla

Código

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
        })
    }

})