前端实现检索结果关键字标红

新建utils.js文件

export function searchKeys(val, keywords) {
  let list = keywords && keywords.split(' ') || []
  val = val + ''
  if (list.length) {
    list.map(keyword => {
      let words = val.match(new RegExp(`(?<!<[^>]*>)${keyword}(?![^<]*>)`, 'ig')) || [];//html不c参与匹配
      words = Array.from(new Set(words))
      words.map(item => {
			 if (item && val.indexOf(item) !== -1) {
				 val = val.replace(new RegExp(`(?<!<[^>]*>)${item}(?![^<]*>)`, 'g'), '<font color="red">' + item + '</font>');
			 } else {
				 return val
		    }
      })
    })
  }
  return val
}

使用

import { searchKeys } from './utils.js'

<span v-html="searchKeys(text, keyWords)"> </span>