JS012. HTML Escape - JS 渲染 HTML 字符串

当业务场景需要用变量存储html标签，包含类名和其他一些属性，再动态地将其渲染到页面上。

看下普通的存储方式：

initHtml: function () {
    var me = this;
    // var _html = ['<div class="mykb-box" id="mykeyboard' + me.count + '">', '<ul class="num-key clearfix">', '<li class="num">1</li>', '<li class="num">2</li>', '<li class="num">3</li>', '<li class="func exit">退出</li>', '<li class="num">4</li>', '<li class="num">5</li>', '<li class="num">6</li>', '<li class="func del">退格</li>', '<li class="num">7</li>', '<li class="num">8</li>', '<li class="num">9</li>', '<li class="func clearall">清除</li>', '<li class="num">0</li>', '<li class="num">.</li>', '<li class="func sure">确定</li>', '</ul>', '</div>', ].join("");
    // $("body").append(_html);
    // me.setPosition();
}

接着是 HTML Escape 的方式：

initHtml: function() {
    var a = ['\x3cdiv class\x3d"mykb-box" id\x3d"mykeyboard' + this.count + '"\x3e', '\x3cul class\x3d"num-key clearfix"\x3e\x3cli class\x3d"num"\x3e1\x3c/li\x3e\x3cli class\x3d"num"\x3e2\x3c/li\x3e\x3cli class\x3d"num"\x3e3\x3c/li\x3e\x3cli class\x3d"func exit"\x3e\u9000\u51fa\x3c/li\x3e\x3cli class\x3d"num"\x3e4\x3c/li\x3e\x3cli class\x3d"num"\x3e5\x3c/li\x3e\x3cli class\x3d"num"\x3e6\x3c/li\x3e\x3cli class\x3d"func del"\x3e\u9000\u683c\x3c/li\x3e\x3cli class\x3d"num"\x3e7\x3c/li\x3e\x3cli class\x3d"num"\x3e8\x3c/li\x3e\x3cli class\x3d"num"\x3e9\x3c/li\x3e\x3cli class\x3d"func clearall"\x3e\u6e05\u9664\x3c/li\x3e\x3cli class\x3d"num"\x3e0\x3c/li\x3e\x3cli class\x3d"num"\x3eX\x3c/li\x3e\x3cli class\x3d"func sure"\x3e\u786e\u5b9a\x3c/li\x3e\x3c/ul\x3e\x3c/div\x3e'].join("");
    b("body").append(a);
    this.setPosition()
}

' \x ' 是16进制的转义字符，十六进制中，数字是按'0 1 2 … 9 a b c d e f 11 12 … 19 1a 1b …'排列的，f表示十进制的16，11表示十进制的17。

由此可知 ' 3c ' 中的 3 代表 十位数，值是 3*16， c 是12 ，总60，在ASCII 编码表中，60代表' < ' ，61代表' = ' ，62代表' > ' ，在编码套在a变量

var a = ['<div class="mykb-box" id="mykeyboard"' + this.count + '">'………………

再或者：

function htmlEscape(text) {
    return text.replace(/[<>"&]/g, (match, pos, originalText) => {
        switch (match) {
            case "<": return "&lt;";
            case ">": return "&gt;";
            case "&": return "&amp;";
            case "\"": return "&quot;";
        }
    })
}

分享一个jquery动态渲染的数字小键盘插件：模拟数字键盘插件 mynumkb.js

- END -