需求:
- 通过插件组装了一段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}}/>