有时候后台返回的数据中有字符串, 并需要将字符串转化为 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(/�*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(/�*39;/g, "'");
- }
- if (!noquotes) {
- string = string.replace(/"/g, '"');
- }
- string = string.replace(/&/g, '&');
- return string;
- }
- </script>
- </HTML>
里面的 JSON 数据为
- {
- "data":[{
- "sas":"<section data-id="23210" class="xmyeditor" data-type="lspecial06" data-tools="" powered-by="xmyeditor.com"> <section style="text-align: center;" powered-by="xmyeditor.com"> <section style="color: #fff;line-height: 80px;text-shadow: 0 1px #ccc, 1px 0 #ccc, -1px 0 #ccc, 0 -1px #ccc;" powered-by="xmyeditor.com"> <p style="padding: 0px;margin: 0px;font-size:80px;"> <strong class="autosort">1</strong> </p> </section> </section> <section style="text-align: center;margin-top: -45px;" powered-by="xmyeditor.com"> <section style="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;" powered-by="xmyeditor.com"> <section style="margin-top: 5px;" powered-by="xmyeditor.com"> <section style="color: #333;letter-spacing: 1px;line-height: 24px;" powered-by="xmyeditor.com"> <p style="padding: 0px;margin: 0px;font-size: 15px;"> <strong class="xmybrush"> 五月 & lt;/strong> </p> </section> </section> </section> <section style="color: #666;letter-spacing: 1px;line-height: 24px;" powered-by="xmyeditor.com"> <p style="padding: 0px;margin: 0px;font-size: 17px;" class="xmybrush"> 劳动节 </p> </section> </section> </section>"
- },{
- "sas":"<section data-id="23210" class="xmyeditor" data-type="lspecial06" data-tools="" powered-by="xmyeditor.com"> <section style="text-align: center;" powered-by="xmyeditor.com"> <section style="color: #fff;line-height: 80px;text-shadow: 0 1px #ccc, 1px 0 #ccc, -1px 0 #ccc, 0 -1px #ccc;" powered-by="xmyeditor.com"> <p style="padding: 0px;margin: 0px;font-size:80px;"> <strong class="autosort">1</strong> </p> </section> </section> <section style="text-align: center;margin-top: -45px;" powered-by="xmyeditor.com"> <section style="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;" powered-by="xmyeditor.com"> <section style="margin-top: 5px;" powered-by="xmyeditor.com"> <section style="color: #333;letter-spacing: 1px;line-height: 24px;" powered-by="xmyeditor.com"> <p style="padding: 0px;margin: 0px;font-size: 15px;"> <strong class="xmybrush"> 六月 & lt;/strong> </p> </section> </section> </section> <section style="color: #666;letter-spacing: 1px;line-height: 24px;" powered-by="xmyeditor.com"> <p style="padding: 0px;margin: 0px;font-size: 17px;" class="xmybrush"> 儿童节 </p> </section> </section> </section>"
- },{
- "sas":"<section data-id="23210" class="xmyeditor" data-type="lspecial06" data-tools="" powered-by="xmyeditor.com"> <section style="text-align: center;" powered-by="xmyeditor.com"> <section style="color: #fff;line-height: 80px;text-shadow: 0 1px #ccc, 1px 0 #ccc, -1px 0 #ccc, 0 -1px #ccc;" powered-by="xmyeditor.com"> <p style="padding: 0px;margin: 0px;font-size:80px;"> <strong class="autosort">1</strong> </p> </section> </section> <section style="text-align: center;margin-top: -45px;" powered-by="xmyeditor.com"> <section style="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;" powered-by="xmyeditor.com"> <section style="margin-top: 5px;" powered-by="xmyeditor.com"> <section style="color: #333;letter-spacing: 1px;line-height: 24px;" powered-by="xmyeditor.com"> <p style="padding: 0px;margin: 0px;font-size: 15px;"> <strong class="xmybrush"> 七月 & lt;/strong> </p> </section> </section> </section> <section style="color: #666;letter-spacing: 1px;line-height: 24px;" powered-by="xmyeditor.com"> <p style="padding: 0px;margin: 0px;font-size: 17px;" class="xmybrush"> 建军节 </p> </section> </section> </section>"
- }
- ]
- }
- View Code
直接运行即可显示转义为 HTML 的布局
来源: http://www.bubuko.com/infodetail-3024638.html