如何实现文本高亮选中？

如何实现文本高亮选中？ 前言：

我们在展示文本时可能会对关键字或者敏感词进行标红高亮选中，一般的做法呢就是使用正则去把关键字进行替换，那么接下来来呢给大家介绍一下最常用的文本选中高亮，以及处理最全面的方法！

使用正则进行文本选中高亮 1.使用正则进行高亮替换

let text = 'abcdefg'
text = text.replace( new RegExp('a', 'g'), function (a) {
 return a.fontcolor('red') })

console.log(text) 
打印：<font color="red">a</font>bcdefg

这样我们就可以得到一个正常的替换完以后的字符，渲染出来就可以了，当然你可以使用自定义的方法把a.fontcolor()替换掉，写你自己想要加的样式

2.如果要高亮的文本内存在特殊字符会怎么样呢？

比如当前有一个文本’abcdefg***‘ 要去匹配g***,那么他就会报错，如图：

 

 

 如何解决呢？

我们可以把要高亮的文本作为特殊字符进行匹配高亮：

let text = 'abcdefg***'
text = text.replace( new RegExp('[a***]', 'g'), function (a) {
 return a.fontcolor('red') })
console.log(text)
打印：<font color="red">a</font>bcdefg<font color="red">*</font><font color="red">*</font><font color="red">*</font>

可以发现他把关键字a***作为特殊字符处理的话会把他拆成['a','*','*']来单独的进行查找替换，所以就会出现问题，看例子，我实际是想要匹配’‘a**’这一个关键字，但是拆开之后单独处理就会出现看到的打印这种情况

我们再来看一个问题，如果我有多个文本要替换呢？比如说：我要对a,o进行高亮呢？

你会发现当去匹配o的时候会把第一次替换完的字符标签<font color="red"></font>标签内的字符也给替换掉，所以使用这两种方法呢只能去匹配单个字符，如何解决呢？

3.使用递归对字符进行匹配实现同时多个关键字高亮，同时解决特殊字符等出现的问题

思路：

1.要实现处理特殊字符也给替换高亮，我的想法就是不去使用正则而是使用字符串正常判断相等

2.因为要实现多次匹配高亮关键字，但是不能保证关键字会不会和替换的标签内容起冲突，所以先把数据给处理了，最后再去判断处理好的每一段数据和关键字是否相同最后统一去替换

 

（一）：使用递归实现把要高亮的关键字进行分割，先看代码

setHighlightText (array, key) {
    for (let i = array.length - 1; i >= 0; i--) {
      if (typeof array[i] === 'object') {
        this.setHighlightText(array[i], key)
      } else {
        const v = array[i].split(key)
        for (let j = v.length - 1; j > 0; j--) {
          v.splice(j, 0, key)
        }
        array[i] = v
      }
    }
  }

我们先来看代码，

首先setHighlightText接收两个代码，一个是要处理的数据类型是数组，另一个就是关键字，类型是字符串，然后循环要处理的数组，进行每一项的类型判断，如果是数组的话进行递归调用，如果是字符串的话进行solit截取转换为数组，在通过solice将关键字回填进原本的位置，比如我们首次要处理的是['adcdacab'],关键字是a得到最后的结果就是[['','a','dcd','a','c','a','b']],然后在进行对 c关键字进行处理就会得到[['','a',['d','c','d'],'a','c','a','b']],这样就会根据关键字把数据分割好

然后我们发现最终得到的数据是一个多维数组，我们使用array.flat(Infinity)对数组进行扁平化，然后通过循环匹配把关键字进行替换，最终将数组通过join('')转换为字符串就可以了，看代码：

highlightText (array = [], key = [], color = 'red') {
    if (!key || key.length <= 0) {
      return array.flat(Infinity).join('')
    }
    for (let i = 0; i < key.length; i++) {
      this.setHighlightText(array, key[i])
    }
    const arrays = array.flat(Infinity)
    for (let j = 0; j < key.length; j++) {
      for (let i = 0; i < arrays.length; i++) {
        console.log(arrays[i], key[j])
        if (arrays[i] === key[j]) {
          arrays[i] = key[j].fontcolor(color)
        }
      }
    }
    return arrays.join('')
  }

 

最后呢我们调用highlightText传入要处理的数据[],以及关键词[],和高亮的颜色就可以完美的实现文本高亮显示了，此方法呢可以同时处理多个关键字高亮，可以说及其的完美！