html标签转义和反转义

“`

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<style type="text/css">
    #textarea {
        width: 500px;
        height: 500px;
        margin: 0 auto;
    }
</style>
<textarea id="textarea">

</textarea>
<!-- <script type="text/javascript"> alert("我是javascript代码！");</script> -->
<button id="re">转义</button> <button id="re2">反转义</button>
<h4>转义</h4>
<p id="show"></p>
<h4>反转义</h4>
<p id="show2"></p>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    (function(w){
        function Demo() {
            var _this = this;
            _this.init = function() {

                _this.bindEvent();
            };
            _this.bindEvent = function() {
                $("#re").click(function() {        
                    var str = $("#textarea").val();
                    str = _this.unhtml(str);
                    $("#show").text(str); //要注意这里都是text方法哈。
                });
                $("#re2").click(function() {
                    var str = $("#textarea").val();
                    str = _this.html(str); //这个html方法是这个对象的。不是jq的html方法
                    $("#show2").text(str); //要注意这里都是text方法哈。
                    //假设后台返回过来的数据时经过转义的
                    //&lt;script type=&quot;text/javascript&quot;&gt; alert(&quot;我是javascript代码！&quot;);&lt;/script&gt;
                    //前端显示直接 用jq的html方法显示到页面上就行了。不要用text方法，也不需要自己转义哈。切记！切记！
                });

            };
        };
        Demo.prototype = {
            _this: this,
            /**
             * 将str中的html符号转义,将转义“'，&，<，"，>”五个字符
             * @method unhtml
             * @param { String } str 需要转义的字符串
             * @return { String } 转义后的字符串
             * @example
             * ```javascript
             * var html = '<body>&</body>';
             *
             * //output: &lt;body&gt;&amp;&lt;/body&gt;
             * console.log( UE.utils.unhtml( html ) );
             *
             * ```
             */
            unhtml:function (str, reg) {
                return str ? str.replace(reg || /[&<">'](?:(amp|lt|quot|gt|#39|nbsp|#d+);)?/g, function (a, b) {
                    if (b) {
                        return a;
                    } else {
                        return {
                            '<':'&lt;',
                            '&':'&amp;',
                            '"':'&quot;',
                            '>':'&gt;',
                            "'":'&#39;'
                        }[a]
                    }

                }) : '';
            },

            /**
             * 将str中的转义字符还原成html字符
             * @see UE.utils.unhtml(String);
             * @method html
             * @param { String } str 需要逆转义的字符串
             * @return { String } 逆转义后的字符串
             * @example
             * ```javascript
             *
             * var str = '&lt;body&gt;&amp;&lt;/body&gt;';
             *
             * //output: <body>&</body>
             * console.log( UE.utils.html( str ) );
             *
             * ```
             */
            html:function (str) {
                return str ? str.replace(/&((g|l|quo)t|amp|#39|nbsp);/g, function (m) {
                    return {
                        '&lt;':'<',
                        '&amp;':'&',
                        '&quot;':'"',
                        '&gt;':'>',
                        '&#39;':"'",
                        '&nbsp;':' '
                    }[m]
                }) : '';
            }
        } 
        w.Demo = Demo;
    })(window)
    var demo = new Demo();
    demo.init();
</script>
</body>
</html>

附上两张效果图

将html标签转义

将html标签转义后字符串反转义成html标签

这里有防js代码注入的文章
. 防js代码注入 http://blog.csdn.net/wx11408115/article/details/78201544

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/wx11408115/article/details/78202243
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-06-13 11:04:12
阅读 ( 702 )
分类：前端

html标签转义和反转义

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看