字符串转义为HTML
有时候后台返回的数据中有字符串，并需要将字符串转化为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">五月</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">六月</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">七月</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>"
}
]
}
直接运行即可显示转义为HTML的布局
字符串转义为HTML的更多相关文章
- 是否采用Sybase形式的自动字符串转义(用 '' 表示 '）
;; 关于php.ini ;; ; 这个文件必须命名为'php.ini'并放置在httpd.conf中PHPINIDir指令指定的目录中. ; 最新版本的php.ini可以在下面两个位置查看: ; h ...
- python字符串转义与正则表达式特殊字符转义
最近在自学python,字符串和正则表达式的特殊字符转义有点混淆,做个笔记简单总结一下. 1.普通字符串转义 在字符串中使用特殊字符时,要用反斜杠(\)转义字符.例如:'Let\'s go!',这里对 ...
- PHP字符串转义
与PHP字符串转义相关的配置和函数如下: 1.magic_quotes_runtime 2.magic_quotes_gpc 3.addslashes()和stripslashes() 4.mysql ...
- 从 RegExp 构造器看 JS 字符串转义设计
多年前我第一次入职腾讯的时候,DC 从杭州给我寄来了一本他刚翻译出炉的<高性能 JavaScript>.那段时间为了帮忙校对,我仔细阅读了书中的每一个段落,结果积累了不少 JavaScri ...
- java字符串转义,把<>转换成<>等字符【原】
java字符串转义,把<>转换成<>等字符 使用的是commons-lang3-3.4 中的StringEscapeUtils类 package test; import ja ...
- react将字符串转义成html语句
在使用reactjs库的时候,会遇到将一段html的字符串,然后要将它插入页面中以html的形式展现,然而直接插入的话页面显示的就是这段字符串,而不会进行转义,可以用以下方法插入,便可以html的形式 ...
- mybatis字符串转义问题
问题描述 @Select("select * from account order by #{orderBy} #{orderRule} limit #{start},#{offset}&q ...
- PHP实现字符串转义和还原
首先大家可以简单了解下什么是转义字符?有什么用? 转义字符是一种特殊的字符常量.转义字符以反斜线"\"开头,后跟一个或几个字符.转义字符具有特定的含义,不同于字符原有的意义,故称“ ...
- PHP怎么实现字符串转义和还原？
首先大家可以简单了解下什么是转义字符?有什么用? 转义字符是一种特殊的字符常量.转义字符以反斜线"\"开头,后跟一个或几个字符.转义字符具有特定的含义,不同于字符原有的意义,故称“ ...
随机推荐
- Codeforces Round #551 (Div. 2) D. Serval and Rooted Tree （树形dp）
题目链接 题意:给你一个有根树,假设有k个叶子节点,你可以给每个叶子节点编个号,要求编号不重复且在1-k以内.然后根据节点的max,minmax,minmax,min信息更新节点的值,要求根节点的值最 ...
- 只要三步，使用html5+js实现像素风头像生成器
只要三步,使用html5+js实现像素风头像生成器 html5的画布给我们带来了很大的空间,其实像素风格头像生成器只是用到了画方块的方法.画一个像素头像,只要三步,1.解决像素点,2.解决像素点之间的 ...
- Maven - pom中的<repository> <pluginRepositories>
总结: <repository> 允许我们可以在POM中配置其它的远程仓库.这样做的原因有很多,比如你有一个局域网的远程仓库,使用该仓库能大大提高下载速度,继而提高构建速度,也有可能你依赖 ...
- EntityFramework6之原生SQL
原文:https://www.cnblogs.com/wujingtao/p/5412329.html 用EF执行SQL又比ADO.NET方便,特别是在执行查询语句的时候,EF会把查询到的数据自动保存 ...
- 微信小程序的桌面图标问题
提问: 笔者在发布小程序后,发现无法在安卓手机创建桌面图标,而其它的小程序却可以. 回答: 在小程序后台页面(从公众平台进入)完整填写小程序的信息,之后便可创建桌面图标. 这可能是微信的某种筛查机制在 ...
- Python教学课程分享
一．Python基本语法 1.1整数,实数,复数 前言: Python编程环境及方法 在python底层环境中唤醒python对话,直接在python中输入指令对系统进行命令编程 随意打开一个记事本或 ...
- 软件工程---作业(one)
(1) 回顾你过去将近3年的学习经历 1.1 有序列表项一当初你报考的时候,是真正喜欢计算机这个专业吗? 自己填写来着,对这个专业也不是特别了解:导致后续学习很差 1.2 有序列表项二你现在后悔选择了 ...
- 第二卷 Spring羊群理论
写在前面: 话说这天小迦罗在和哑圣观察者聊天时,哑圣谈到自己比较喜欢吃羊,这时候小迦罗说自己的爸爸也喜欢吃,就给哑圣老师讲了他小时候在春天里放羊的故事还有参观Spring的事情.(后面以此抛砖引玉可以 ...
- 学习笔记_J2EE_SpringMVC_03_注解配置_@RequestMapping用法
@RequestMappingde的用法 摘要: 主要介绍注解@RequestMapping的用法 一.@RequestMapping 简介 在Spring MVC 中使用 @RequestMappi ...
- 2018-2019-2 网络对抗技术 20165328 Exp1 PC平台逆向破解
实验目的: 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getSh ...