js实现搜索关键字高亮

开发背景：vue项目

方法一：

实现代码：

// 关键字变红
function keywordRed (keyword) {
  if (keyword && keyword !== '') {
    const nodesObj = document.getElementsByClassName('item-title')
    const nodes = Object.values(nodesObj)
    nodes.forEach(item => {
      console.log(item)
      // 这里如果用innerHTML，第二次搜索时会有问题，改用innerText
      let str = item.innerText
      str = str.split(keyword).join("<span style='color:red;'>" + keyword + "</span>")
      item.innerHTML = str
    })
  }
}

调用时机：

  updated () {
    this.$nextTick(() => {
      if (this.render) {
        keywordRed(this.keyword)
        this.render = false    // 下次点搜索数据改变后，重置this.render=true
      }
    })
  }

方法二：

1、写个函数式组件KeywordText，放在组件目录/src/components下

<script>
export default {
  name: 'KeywordText',
  props: {
    keyword: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      required: true
    }
  },
  render (h) {
    const vnodes = []
    const text = this.text.split(this.keyword)
    text.forEach(str => {
      vnodes.push(h('span', null, str))
      vnodes.push(h('span', { style: 'color: red' }, this.keyword))
    })
    if (text.length > 0) {
      vnodes.pop()
    }
    return h('span', null, vnodes)
  }
}
</script>

2、引入并使用

<div class="title">
  <KeywordText :text="item.title" :keyword="keyword" />
</div>

<script>
import KeywordText from '@/components/KeywordText/index.vue'

export default {
  data () {
    return {
      keyword: '关键字'
    }
  }
  components: { KeywordText }
}
</script>

推荐使用第二种方法。

记录于2022-3-1

修改于2022-3-31