巧用DOM API实现HTML字符的转义和反转义

这篇文章发布于 2021年01月21日,星期四,00:21,归类于 JS API。 阅读 20125 次, 今日 5 次 11 条评论

 

DOM API 转义和反转义HTML

一、HTML字符的转义

不转弯,HTML字符转义有更简单更容易记忆的方法,如下:

let textNode = document.createTextNode('<span>by zhangxinxu</span>');
let div = document.createElement('div');
div.append(textNode);
console.log(div.innerHTML);

也就是把HTML内容作为文本节点的textContent内容,然后使用普通元素的innerHTML属性返回下就可以了。

上面代码输出的结果是:

&lt;span&gt;by zhangxinxu&lt;/span&gt;

大家可以复制上面代码在控制台跑一下,例如下图就是我在Chrome浏览器中运行的结果:

DOM API实现HTML转义示意截图

二、HTML字符的反转义

这个需要用到的DOM API就相对稀罕了一点,使用DOMParser API。

代码示意:

let str = '&lt;span&gt;by zhangxinxu&lt;/span&gt;';
let doc = new DOMParser().parseFromString(str, 'text/html');
console.log(doc.documentElement.textContent);

结果就是:

<span>by zhangxinxu</span>

眼见为实,运行截图参见下方:

HTML反转义方法示意


然后还有一种方法是借助<textarea>元素,这是IE浏览器时代常用的一种方法,代码示意如下:

let textarea = document.createElement('textarea');
textarea.innerHTML = '&lt;span&gt;by zhangxinxu&lt;/span&gt;';
console.log(textarea.childNodes[0].nodeValue);

结果也是一样的,转义的HTML标签都反转义回来了:

textarea元素反转义HTML

三、DOM API方法的缺点

DOM API方法利用了浏览器的能力,更容易上手,转义结果也更安全,但是有个不足,那就是只能在浏览器上下文环境中使用。例如,如果是Service Workers环境,或者是Node.js环境中,这个方法就不行了,只能使用传统的字符串处理方法了。

传统的字符串处理代码示意:

/**
 * 转义HTML标签的方法
 * @param  {String} str 需要转义的HTML字符串
 * @return {String}     转义后的字符串
 */
var funEncodeHTML = function (str) {
    if (typeof str == 'string') {
        return str.replace(/<|&|>/g, function (matches) {
            return ({
                '<': '&lt;',
                '>': '&gt;',
                '&': '&amp;'
            })[matches];
        });
    }

    return '';
};
/**
 * 反转义HTML标签的方法
 * @param  {String} str 需要反转义的字符串
 * @return {String}     反转义后的字符串
 */
var funDecodeHTML = function (str) {
    if (typeof str == 'string') {
        return str.replace(/&lt;|&gt;|&amp;/g, function (matches) {
            return ({
                '&lt;': '<',
                '&gt;': '>',
                '&amp;': '&'
            })[matches];
        });
    }

    return '';
};

四、爽言爽语

最近一周在更换网站备案,目前已经备案好了,网站访问将会恢复正常,文章更新也会回到正常频率。

OK,这就是本文全部内容啦!

感谢大家支持,如果觉得相关知识还真有用,欢迎转发到朋友圈,如果是PC端访问,则左侧或下方应该可以看到微信图标按钮,点击、扫码分享,感谢感谢!

(本篇完)

分享到:


发表评论(目前11 条评论)

  1. moumou说道:

    小白问一下这个使用的场景有哪些

  2. 阿龙说道:

    function encode(str) {
    var div = document.createElement(‘div’);
    div.textContent = str;
    return div.innerHTML;
    }

    function decode(str) {
    var div = document.createElement(‘div’);
    div.innerHTML = str;
    return div.textContent;
    }

  3. ziven27说道:

    JSX 浏览器端的渲染就是运动的这个方案

  4. 郭永顺说道:

    大佬出来创业了吗?

  5. so说道:

    图片挂了

  6. 代码如诗如画说道:

    只做纯js前端的我感觉非常实用哈哈

  7. 某某某说道:

    是好办法。

    就是网上许多简易的字符串替换HTML转义做得太粗糙(典型如连续空格)无法处理。想必完整替换处理也是个头疼事情。尽管,对于避免一些(意外)HTML注入是有意义的。

    这里用DOM处理,思路奇巧,效果良好,同时代码还特别短,前面大多数情境下够用。(毕竟后端可以不计成本,别人写好的工具随便用)

  8. 陆波说道:

    分享正爽😏😏😏😏😏😏😏😏