Erstellen Sie einen globalen Suchcode und markieren Sie ihn

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zum Erstellen und Hervorheben des globalen Suchcodes und zum Erstellen und Hervorheben des globalen Suchcodes vorstellen. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

Anforderungen

Als ich kürzlich an einem WeChat-Applet arbeitete, musste ich bei der Eingabe von Inhalten in das Suchfeld globale Übereinstimmungen und Hervorhebungseffekte erzielen , geben Sie die Daten rekursiv im Hintergrund zurück, ersetzen Sie den Wert des Objekts durch den erforderlichen Dom-Knoten und erzielen Sie den Hervorhebungseffekt durch Rich-Text.

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 glaube, Sie haben es gemeistert, nachdem Sie das gelesen haben Fall in diesem Artikel Methode, weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Webpack4.0-Verpackungsoptimierungsstrategiezusammenfassung_Javascript-Fähigkeiten

Schlüsselwert-String-Konvertierung JS-Methode von JSON Zeichenfolge

Das obige ist der detaillierte Inhalt vonErstellen Sie einen globalen Suchcode und markieren Sie ihn. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!