JS反HTML转义的方法jquery.html()获取DOM的代码时反转义

场景：jquery.html()获取DOM的代码时如果页面有html代码则发现是被转义的，如果要恢复的话需要做相应处理。

张鑫旭老师的文章：
https://www.zhangxinxu.com/wordpress/2021/01/dom-api-html-encode-decode/

摘要：

///不好用
let str = '<span>by zhangxinxu</span>';
let doc = new DOMParser().parseFromString(str, 'text/html');
console.log(doc.documentElement.textContent);

///没试
let textarea = document.createElement('textarea');
textarea.innerHTML = '<span>by zhangxinxu</span>';
console.log(textarea.childNodes[0].nodeValue);

推荐：
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(/<|>|&/g, function (matches) {
            return ({
                '&lt;': '<',
                '&gt;': '>',
                '&amp;': '&'
            })[matches];
        });
    }

    return '';
};

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1210.html

转载时须注明出处及本声明