微信小程序实现关键字高亮显示

思路是把字符串切分成数组, 并在数组中标记高亮, 然后在wxml里遍历这个数组. 示例代码如下

page.js

var searchWord
searchWord = '篇'//设定搜索词是

/*
		函数: 将一段字符串按照关键字拆分成数组,并且标明是否高亮
		输入:all 原字符串全文
		     search 关键词
		输出:按照关键词拆分好的数组
	 */
function strHighlight(all, search) {
  var search_prex = new RegExp(search, 'gi');//关键字转为正则表达式
  var d
  d = all.split(search_prex)//按关键字正则分割

  var train
  train = 0

  var e = []//e是最终拆分好的数组
  d.forEach(function (v, k, input) {
    var tmp;//临时变量, 用于构建e的一个元素

    //将非关键字保存进e
    tmp = {
      str: v,
      highlight: false
    }
    e.push(tmp)

    train += v.length

    var keyword
    keyword = all.substr(train, search.length)
    train += search.length

    //将关键字保存进e
    tmp = {
      str: keyword,
      highlight: true
    }
    e.push(tmp)
  })
  e.pop()//删除最后一个元素,因为它是多余的
  return (e)
}

Page({

  //数据来啦
  data: {
    list: [
      { content: '这是第一篇文章' },
      { content: '这是第二篇文章' },
      { content: '这是第三篇文章' },
      { content: '这是第四篇文章' }
    ]
  },

  onLoad: function (options) {
    var list2;//临时的一个变量
    list2 = this.data.list//取得page data里的值

    list2.forEach(function (v, k, input) {
      list2[k]['content'] = strHighlight(list2[k]['content'], searchWord)
      console.log(list2[k]['content'])
    })

    this.setData({
      list: list2
    })

  }
})

page.wxml

<block wx:for="{{list}}">
  <view>
    <block wx:for="{{item.content}}" wx:key="*this" wx:for-item="items">
      <text wx:if="{{items.highlight == true}}" style="color:red;">{{items.str}}</text>
      <text wx:else>{{items.str}}</text>
    </block>
  </view>
</block>

效果如下