Créez un code de recherche global et mettez-le en surbrillance

Cette fois, je vais vous apporter les précautions pour créer et mettre en évidence le code de recherche global et créer et mettre en évidence le code de recherche global Ce qui suit est un cas pratique, jetons un coup d'œil.

Exigences

Lorsque je travaillais récemment sur une applet WeChat, j'avais besoin d'obtenir une correspondance globale et des effets de surbrillance lors de la saisie de contenu dans le champ de recherche. , renvoie récursivement les données en arrière-plan et remplace la valeur de l'objet par le nœud dom requis, et obtient l'effet de mise en évidence grâce au texte riche.

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

Je crois que vous l'avez maîtrisé après avoir lu le Cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Stratégie d'optimisation d'emballage Webpack4.0 summary_javascript skills

Conversion de chaîne clé-valeur Méthode JS de json chaîne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!