前言
我们通常在获取页面上文本时通常会用到 innerHTML 和 innerText 或者 textContent，当我们需要把一段带有标签的文本拿来调试时，不得不用到 innerHTML，但是将文本进行修改或者替换时，会和标签内的一些字母冲突；比如下面的例子：
需求
在输入框中键入字符时，文章中自动高亮输入框中的字符
思路
获得需求时，第一时间的思路就是把 DOM 中的文本获取过来，通过 keyup 监听事件实时获取输入框中的值，把文本放入一个 span 标签，给 span 设置样式，达到背景高亮的效果，最后利用正则和replace方法把文本全部替换在替换掉 DOM 上的文本即可
实现
当我以为这样一套操作很完美时，发现了问题，因为我是通过 innerHTML 获取的 DOM 上的文本，里面会自带标签，input 框输入的有些字符会和标签内的字符冲突，导致在替换时，会直接让一个带有样式的标签失效
改进
起初我尝试了很多种办法，比如用 innerText 获取纯文本，替换时就不会有标签被误伤，可是想不到有哪种办法可以将默认的标签插入回去，无用的方法写了很多，当我一筹莫展，望而生畏时，灵光乍现，想到了一个巧妙的办法：
- 在获取 DOM 文本时，将文本中自带的标签通过正则表达式替换成不太可能被用户输入到的字符并存放到一个数组中。
- 此时拿到替换好的新文本，再在其中替换需要高亮显示的部分
- 最后利用 for 循环将一开始被存储起来的标签名，逐个插入到他们原本的位置
代码如下
这个思路很巧妙也很低量，而且ヾ这个符号能出现在文本中的机率非常小，足以应付一些基本场景
