巧用DOM API实现HTML字符的转义和反转义
2011 年 6 月 16 日
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9770
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。
一、HTML字符的转义
不转弯，HTML字符转义有更简单更容易记忆的方法，如下：
let textNode = document.createTextNode('by zhangxinxu');
let div = document.createElement('div');
div.append(textNode);
console.log(div.innerHTML);
也就是把HTML内容作为文本节点的textContent内容，然后使用普通元素的innerHTML属性返回下就可以了。
上面代码输出的结果是：
by zhangxinxu
大家可以复制上面代码在控制台跑一下，例如下图就是我在Chrome浏览器中运行的结果：
二、HTML字符的反转义
这个需要用到的DOM API就相对稀罕了一点，使用DOMParser API。
代码示意：
let str = 'by zhangxinxu';
let doc = new DOMParser().parseFromString(str, 'text/html');
console.log(doc.documentElement.textContent);
结果就是：
by zhangxinxu
眼见为实，运行截图参见下方：
然后还有一种方法是借助