Beispiel für ein WeChat-Applet, das die Hervorhebung globaler Suchcodes implementiert

In diesem Artikel wird hauptsächlich das Beispiel der globalen Suchcode-Hervorhebung im WeChat-Applet vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Anforderungen

Als ich kürzlich an einem WeChat-Miniprogramm arbeitete, musste ich bei der Eingabe von Inhalten in das Suchfeld globale Übereinstimmungen und Hervorhebungseffekte erzielen. Derzeit besteht die Idee darin, den Hintergrund zu rekursieren, um die Daten zurückzugeben, den Wert des Objekts durch den erforderlichen Dom-Knoten zu ersetzen und den Hervorhebungseffekt durch Rich-Text zu erzielen.

Code

wxml:

<view class=&#39;homePage&#39;>
  <input bindinput="bindKeyInput"></input>
  <view wx:for="{{newJson}}" wx:for-item=&#39;item&#39; 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=&#39;sitem&#39; wx:key>
      <rich-text nodes="{{sitem}}"></rich-text>  
    </view>
  </view>
</view>

js:

//index.js
const app = getApp()

Page({
  data: {
    json: [{ name: 'eiolewkfp', age: 'awdqwwdk', address: 'aueifwhefwfheffoewjowef',aihao:['sdsd','sdfsd','sdsf']}, { name: '98797', age: '6544656', address: '65494364' }], // 可以是任何类型的数据
    newJson: '',
    tempText:''
  },
  onLoad: function (options) {
    this.setData({
      newJson:this.data.json
    })
  },
  digui: function (newJson,obj,key) { // 递归方法，来遍历最内层的字符串并通过正则来替换
    var that = this;
    var reg = new RegExp(that.data.tempText,'g');
    if (newJson.constructor == Array) { 
      newJson.forEach(function (item,index) {
        if (item.constructor == String){
          obj[key].splice(index, 1, item.replace(reg, "<span style=&#39;color:red&#39;>" + 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) { // 这里做全局替换
      if(key){
        obj[key] = newJson.replace(reg, "<span style=&#39;color:red&#39;>" + that.data.tempText + "</span>")
      }
    }
  },
  bindKeyInput: function (e) { // 每次输入来监听键盘，处理匹配的数据
    var text = e.detail.value;
    this.setData({
      tempText:text
    })
    var newJson = JSON.parse(JSON.stringify(this.data.json)); // 实现深复制
    
    this.digui(newJson);
    this.setData({
      newJson:newJson
    })
  }

})

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

js+css zur Erzielung eines Tippeffekts

Eine kurze Einführung in die Verwendung der React-Redux-Middleware

Detaillierte Erläuterung des Lademechanismus des Webpack-Quellcodes

Das obige ist der detaillierte Inhalt vonBeispiel für ein WeChat-Applet, das die Hervorhebung globaler Suchcodes implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!