微信小程序&支付宝小程序&百度小程序 搜索内容高亮

0、

<view class="historyPackage" v-if="histotyArrNodes && histotyArrNodes.length > 0">
   <!-- <rich-text v-for="(item, index) in histotyArrNodes" :key="index" :nodes="item.html" @tap.stop="choseNo" :data-text="item.content" class="search-history-no"></rich-text> -->
   <rich-text v-for="(item, index) in histotyArrNodes" :key="index" :nodes="item" @tap.stop="choseNo" class="search-history-no"></rich-text>
</view>

1、异步

async computedHistoryArrNodes() {	
  const promises = this.histotyArr.map(item => {
  const res = item.match(new RegExp(`(.*)(${this.inpVal})(.*)`))
 let str = item
 if (res) {
    const [_, prefix = '', content = '', suffix = ''] = res
    str = `<span>${prefix}<span style="color: #FABE00;">${content}</span>${suffix}</span>`
}
 return new Promise(resolve => {
      // #ifdef MP-ALIPAY
      parse(str, (err, html) => {
	 resolve(html)
      })
      // #endif
      // #ifdef !MP-ALIPAY
      resolve(str)
      // #endif
      // parse(str, (err, html) => {
      // 	resolve({
      // 		content: item,
      // 		html,
      // 	})
      // })
   })
 })
   const nodes = await Promise.all(promises)
   this.histotyArrNodes = nodes
 },

2、同步

computedHistoryArrNodesMethod() {
			let nodes = []
			this.histotyArr.forEach(item => {
				const res = item.match(new RegExp(`(.*)(${this.inpVal})(.*)`))
				let str = item
				if (res) {
					const [_, prefix = '', content = '', suffix = ''] = res
					str = `<span>${prefix}<span style="color: #FABE00;">${content}</span>${suffix}</span>`
				}
				// #ifdef MP-ALIPAY
				parse(str, (err, html) => {
					if (!err) {
						nodes.push(html)
					}
				})
				// #endif
				// #ifdef !MP-ALIPAY
				nodes.push(str)
				// #endif
				// return parse(str, (err, html) => {
				// 	if (!err) {
				// 		nodes.push(html)
				// 	}
				// })
			})
			this.histotyArrNodes = nodes
		},