搜索多关键字,匹配内容并将关键字高亮显示

要求:搜索多关键字用空格隔开,不匹配标签

keysLight (keyWord, content) {
      // 搜索文字处理:  以空格分隔关键字, 去重,倒序(先匹配文字多的,再匹配文字少的)
      const searchArray = keyWord.split(' ').filter(item => item.length)
      const keys = [...new Set(searchArray)].sort((a, b) => { return b.length - a.length })
      let text = content
      keys.forEach(key => {
        const stringKey = '<font color="#f56c6c">' + key + '</font>'
        let num = -1 // 存放html数组对应的索引
        const regKey = new RegExp(key, 'gi')
        const regHtml = new RegExp('<.*?>', 'ig') // 匹配html元素
        const arrayHtml = text.match(regHtml) // 存放html元素的数组
        text = text.replace(regHtml, '{~}') // 替换html标签
        text = text.replace(regKey, stringKey) // 替换关键字
        text = text.replace(/{~}/g, function () {
        // 恢复html标签
          num++
          return arrayHtml[num]
        })
      })
      return text
    }

 

 

posted @ 2021-03-26 14:00  Vicky-Rong  阅读(873)  评论(0编辑  收藏  举报