转义和反转义

最新推荐文章于 2023-06-09 21:13:27 发布

清风乐鸣

最新推荐文章于 2023-06-09 21:13:27 发布

阅读量3.2k

点赞数 1

分类专栏： HTML 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/QTFYING/article/details/72957094

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

简单说一下业务场景，前台用户通过 input 输入内容，在离开焦点时，将内容在 div 中显示。

这时遇到一个问题，如果用户输入了 html 标签，则在 div 显示中，标签被解析。

由于是纯前端操作，不涉及后端，因此需要通过 js 对输入内容进行转义。

这里提供一个非常简单有效的转义方案，利用了 innerHTML 和 innerText

注：火狐不支持 innerText，需要使用 textContent 属性，而 IE 早期版本不支持此属性，为了同时兼容 IE
及火狐，需要进行判断操作.

因为 innerText（textContent）会获取纯文本内容，忽略 html 节点标签，而 innerHTML 会显示标签内容，

所以我们先将需转义的内容赋值给 innerText（textContent），再获取它的 innerHTML 属性，这时获取到的就是转义后文本内容。

<!DOCTYPE html>
<html>
    <div id="board"></div>
    <script>
        function HTMLEncode(html) {
            var temp = document.createElement("div");
            var board = document.getElementById("board");
            board.appendChild(temp);
            (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
            var output = temp.innerHTML;
            temp = null;
            return output;
        }
        var tagText = "<p><b>123&456</b></p>";
        console.log(HTMLEncode(tagText)); //<p><b>123&456</b></p> 

        function HTMLDecode(text) {
            var temp = document.createElement("div");
            temp.innerHTML = text;
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        }
        var tagText = "<p><b>123&456</b></p>";
        var encodeText = HTMLEncode(tagText);
        console.log(encodeText); //<p><b>123&456</b></p>
        console.log(HTMLDecode(encodeText)); //<p><b>123&456</b></p>
    </script>
</body>

</html>