html替换匹配文本

直接上代码:
逻辑很简单就是用递归哪到text节点替换对应字符。
(本来想用正则处理但是难度还是太大了有时间再仔细思考下正则的方式)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    replaceNode('a')
    function replaceNode(key) {
      let htmlstr = '2<div > a1 <a href="####"> a2</a> a3</div> 11111<p>testa</p>1'
      let div = document.createElement("div");
      div.innerHTML = htmlstr;
      const reg = new RegExp(key, 'g');
      let replaceStr = `<span class="aqua">${key}</span>`
      replace(div, reg, replaceStr)
      div.innerHTML = div.innerHTML.replace(/&gt;/g, '>').replace(/&lt;/g, '<')
      document.body.appendChild(div)
    }
    function replace(node, reg, replaceStr) {
      for (let i = 0; i < node.childNodes.length; i++) {
        let cnode = node.childNodes[i];
        if (cnode.nodeName === '#text') {
          cnode.data = cnode.data.replace(reg, replaceStr)
        } else {
          replace(cnode, reg, replaceStr)
        }
      }
    }
  </script>
  <style>
    .aqua {
      color: aqua;
    }
  </style>
</body>

</html>

html替换匹配文本

推荐阅读更多精彩内容