小程序搜索文本高亮组件

wxml

<text wx:for="{{textArr}}" wx:key="index" class="{{item == keyword ? 'highlight':'' }}">{{item}}</text>

js

// components/highlightText/index.js
Component({
  /**
   * Component properties
   */
  properties: {
    keyword: {
      type: String,
      observer: 'keywordChanged'
    },
    text: {
      type: String,
      observer: 'textChanged'
    }
  },

  /**
   * Component initial data
   */
  data: {
    textArr:[],
    skeyword: '',
    stext: ''
  },

  /**
   * Component methods
   */
  methods: {
    keywordChanged(newVal) {
      this.skeyword = newVal
      this.manage()
    },
    textChanged(newVal) {
      this.stext = newVal
      this.manage()
    },
    manage: function() {
      if (!this.stext) { return }
      this.manageText(this.stext, this.skeyword || "")
    },
    manageText: function (str, key) {
      if(key){
        this.setData({ textArr: str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%') })
      }else{
        this.setData({ textArr: [str] })
      }
      // console.log('this.textArr', this.data.textArr)
    }
  },
  externalClasses: ['highlight']
})

pages

<highlight-text class='title' highlight='highlight' text="{{item.title}}" keyword="{{keyword}}"></highlight-text>