字符串转义为HTML

时间：2022-05-15 22:39:39

有时候后台返回的数据中有字符串，并需要将字符串转化为HTML，下面封装了一个方法，如下

// html转义

function htmlspecialchars_decode(string, quote_style) {

    var optTemp = 0

        , i = 0

        , noquotes = false;

    if (typeof quote_style === 'undefined') {

        quote_style = 2;

    }

    string = string.toString().replace(/</g, '<').replace(/>/g, '>');

    var OPTS = {

        'ENT_NOQUOTES': 0,

        'ENT_HTML_QUOTE_SINGLE': 1,

        'ENT_HTML_QUOTE_DOUBLE': 2,

        'ENT_COMPAT': 2,

        'ENT_QUOTES': 3,

        'ENT_IGNORE': 4

    };

    if (quote_style === 0) {

        noquotes = true;

    }

    if (typeof quote_style !== 'number') {

        quote_style = [].concat(quote_style);

        for (i = 0; i < quote_style.length; i++) {

            if (OPTS[quote_style[i]] === 0) {

                noquotes = true;

            } else if (OPTS[quote_style[i]]) {

                optTemp = optTemp | OPTS[quote_style[i]];

            }

        }

        quote_style = optTemp;

    }

    if (quote_style & OPTS.ENT_HTML_QUOTE_SINGLE) {

        string = string.replace(/&#0*39;/g, "'");

    }

    if (!noquotes) {

        string = string.replace(/"/g, '"');

    }

    string = string.replace(/&/g, '&');

    return string;

}

　　为了便于更好的使用该方法，下面是关于转义为html的案例,如下

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<div class="texts">

	</div>

//点击“请求”按钮，开始执行转义并展示

    <button class="btns">请求数据</button>

    <div class="containerBox"></div>

</body>

<script src="vote/js/jquery_v3.3.1.js"></script>

<script>

	$(function(){

		$.ajax({

			url: '1.json',

			type: 'post',

		})

		.done(function(res) {

			console.log(res.data[0]);

			var aaa = res.data[0].sas;

			var ddd = $('.texts').text(aaa)

			htmlspecialchars_decode(res.data[0].sas)

		})

		.fail(function() {

			console.log("error");

		})

		.always(function() {

			console.log("complete");

		});

	})

    $('.btns').click(function() {

        getReq();

    });

    function getReq(){

        $.ajax({

            url: '1.json',

            type: 'post',

            success:function(res){

                console.log(res.data);

                $.each(res.data, function(i, values) {

                    console.log(i)

                    console.log(values.sas);

                    var objHtml = htmlspecialchars_decode(values.sas)

                    $('.containerBox').append(objHtml)

                });

            },

            error:function(e){

                console.log(error)

            }

        });

    }

// html转义，调用的时候只需要传第二个值即可

function htmlspecialchars_decode(string, quote_style) {

    var optTemp = 0

        , i = 0

        , noquotes = false;

    if (typeof quote_style === 'undefined') {

        quote_style = 2;

    }

    string = string.toString().replace(/</g, '<').replace(/>/g, '>');

    var OPTS = {

        'ENT_NOQUOTES': 0,

        'ENT_HTML_QUOTE_SINGLE': 1,

        'ENT_HTML_QUOTE_DOUBLE': 2,

        'ENT_COMPAT': 2,

        'ENT_QUOTES': 3,

        'ENT_IGNORE': 4

    };

    if (quote_style === 0) {

        noquotes = true;

    }

    if (typeof quote_style !== 'number') {

        quote_style = [].concat(quote_style);

        for (i = 0; i < quote_style.length; i++) {

            if (OPTS[quote_style[i]] === 0) {

                noquotes = true;

            } else if (OPTS[quote_style[i]]) {

                optTemp = optTemp | OPTS[quote_style[i]];

            }

        }

        quote_style = optTemp;

    }

    if (quote_style & OPTS.ENT_HTML_QUOTE_SINGLE) {

        string = string.replace(/&#0*39;/g, "'");

    }

    if (!noquotes) {

        string = string.replace(/"/g, '"');

    }

    string = string.replace(/&/g, '&');

    return string;

}

</script>

</html>

　　里面的json数据为

 {

     "data":[{

         "sas":"&lt;section data-id=&quot;23210&quot; class=&quot;xmyeditor&quot; data-type=&quot;lspecial06&quot; data-tools=&quot;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;text-align: center;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;color: #fff;line-height: 80px;text-shadow: 0 1px #ccc, 1px 0 #ccc, -1px 0 #ccc, 0 -1px #ccc;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;p style=&quot;padding: 0px;margin: 0px;font-size:80px;&quot;&gt; &lt;strong class=&quot;autosort&quot;&gt;1&lt;/strong&gt; &lt;/p&gt; &lt;/section&gt; &lt;/section&gt; &lt;section style=&quot;text-align: center;margin-top: -45px;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;background: url(http://alstyle.xmyeditor.com/sucai-png/20190124/5c498d915285ffwwwdwjjcz.qxwrkofsmliqxrpznudguodmwtvlmj);background-repeat: no-repeat;background-size: 100%;width: 100px;height: 30px;display: inline-block;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;margin-top: 5px;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;color: #333;letter-spacing: 1px;line-height: 24px;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;p style=&quot;padding: 0px;margin: 0px;font-size: 15px;&quot;&gt; &lt;strong class=&quot;xmybrush&quot;&gt;五月&lt;/strong&gt; &lt;/p&gt; &lt;/section&gt; &lt;/section&gt; &lt;/section&gt; &lt;section style=&quot;color: #666;letter-spacing: 1px;line-height: 24px;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;p style=&quot;padding: 0px;margin: 0px;font-size: 17px;&quot; class=&quot;xmybrush&quot;&gt; 劳动节 &lt;/p&gt; &lt;/section&gt; &lt;/section&gt; &lt;/section&gt;"

      },{

         "sas":"&lt;section data-id=&quot;23210&quot; class=&quot;xmyeditor&quot; data-type=&quot;lspecial06&quot; data-tools=&quot;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;text-align: center;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;color: #fff;line-height: 80px;text-shadow: 0 1px #ccc, 1px 0 #ccc, -1px 0 #ccc, 0 -1px #ccc;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;p style=&quot;padding: 0px;margin: 0px;font-size:80px;&quot;&gt; &lt;strong class=&quot;autosort&quot;&gt;1&lt;/strong&gt; &lt;/p&gt; &lt;/section&gt; &lt;/section&gt; &lt;section style=&quot;text-align: center;margin-top: -45px;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;background: url(http://alstyle.xmyeditor.com/sucai-png/20190124/5c498d915285ffwwwdwjjcz.qxwrkofsmliqxrpznudguodmwtvlmj);background-repeat: no-repeat;background-size: 100%;width: 100px;height: 30px;display: inline-block;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;margin-top: 5px;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;color: #333;letter-spacing: 1px;line-height: 24px;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;p style=&quot;padding: 0px;margin: 0px;font-size: 15px;&quot;&gt; &lt;strong class=&quot;xmybrush&quot;&gt;六月&lt;/strong&gt; &lt;/p&gt; &lt;/section&gt; &lt;/section&gt; &lt;/section&gt; &lt;section style=&quot;color: #666;letter-spacing: 1px;line-height: 24px;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;p style=&quot;padding: 0px;margin: 0px;font-size: 17px;&quot; class=&quot;xmybrush&quot;&gt; 儿童节 &lt;/p&gt; &lt;/section&gt; &lt;/section&gt; &lt;/section&gt;"

      },{

         "sas":"&lt;section data-id=&quot;23210&quot; class=&quot;xmyeditor&quot; data-type=&quot;lspecial06&quot; data-tools=&quot;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;text-align: center;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;color: #fff;line-height: 80px;text-shadow: 0 1px #ccc, 1px 0 #ccc, -1px 0 #ccc, 0 -1px #ccc;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;p style=&quot;padding: 0px;margin: 0px;font-size:80px;&quot;&gt; &lt;strong class=&quot;autosort&quot;&gt;1&lt;/strong&gt; &lt;/p&gt; &lt;/section&gt; &lt;/section&gt; &lt;section style=&quot;text-align: center;margin-top: -45px;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;background: url(http://alstyle.xmyeditor.com/sucai-png/20190124/5c498d915285ffwwwdwjjcz.qxwrkofsmliqxrpznudguodmwtvlmj);background-repeat: no-repeat;background-size: 100%;width: 100px;height: 30px;display: inline-block;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;margin-top: 5px;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;section style=&quot;color: #333;letter-spacing: 1px;line-height: 24px;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;p style=&quot;padding: 0px;margin: 0px;font-size: 15px;&quot;&gt; &lt;strong class=&quot;xmybrush&quot;&gt;七月&lt;/strong&gt; &lt;/p&gt; &lt;/section&gt; &lt;/section&gt; &lt;/section&gt; &lt;section style=&quot;color: #666;letter-spacing: 1px;line-height: 24px;&quot; powered-by=&quot;xmyeditor.com&quot;&gt; &lt;p style=&quot;padding: 0px;margin: 0px;font-size: 17px;&quot; class=&quot;xmybrush&quot;&gt; 建军节 &lt;/p&gt; &lt;/section&gt; &lt;/section&gt; &lt;/section&gt;"

      }

   ]

 }

直接运行即可显示转义为HTML的布局

相关文章