js 对html string 做裁剪

需求：

• 通过插件组装了一段html string 代码
• 但是html 代码太过于长，导致页码很卡
• 直接去解析html string 字符串很麻烦

进程：

• 将html string 注入到网页，然后通过dom 的方式进行裁剪
• js 可以通过createElement 来创建一个dom 来做容器，并把html 放到对应的容器里

  const div = document.createElement("div");
  const parsedHTML = document.createRange().createContextualFragment(htmlString)
  div.appendChild(parsedHTML)

• 然后通过remove children 来进行裁剪

  let tableElement = div.children[1].children[0].children[1].children[0].children[0].children[0];
  while (tableElement.childElementCount > 20) {
      tableElement.removeChild(tableElement.lastChild)
  }

•  然后再将dom 元素变成string 输出到需要的地方

  pathHtml = div.outerHTML;

• html string 直接导入也可以使用  dangerouslySetInnerHTML 来做导入

  <div dangerouslySetInnerHTML={{__html: htmlString}}/>