Vue实现搜索关键词高亮显示

问题

网站使用关键词搜索，内容有点多，很难看出是不是真的匹配上了搜索关键词，因此做了一个文本高亮显示

解决方法

解决方法比较直接，就是等Vue渲染完DOM后，遍历整个HTML，用正则表达式匹配相应的文本，为其加上<strong>标签，同时自定义标签样式

<template>
  <Input placeholder="输入关键字搜索" v-model="searchValue"/>
  <Button @click="handleSearch">搜索</Button>
  <p class="resultTip">{{content}}</p>
<template>
<script>
export default {
  data(){
    return {
      content: '',
      searchValue: ''
    }
  },
  method: {
    handleSearch () {
      this.$nextTick(() => {
        if (this.searchValue !== '') {
          let doms = document.querySelectorAll('.resultTip')
          let reg = new RegExp(this.searchValue, 'ig')
          for (let index = 0; index < doms.length; index++) {
            let content = doms[index].textContent
            let html = doms[index].innerHTML
            let reg_c = new RegExp(content, 'ig')
            doms[index].innerHTML = html.replace(reg_c, content.replace(reg, ($0) => `<strong style='color: #ed4014'>${$0}</strong>`))
          }
        }
      })
    },
  }
}
</script>