字符串轉義爲HTML
有時候後臺返回的數據中有字符串，並須要將字符串轉化爲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的案例,以下jquery
<!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數據爲ajax
1 { 2 "data":[{ 3 "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>" 4 },{ 5 "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>" 6 },{ 7 "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>" 8 } 9 ] 10 }
直接運行便可顯示轉義爲HTML的佈局json
相關文章
- 1. 使用jQuery轉義HTML字符串
- 2. html轉義字符
- 3. HTML 轉義字符
- 4. HTML轉義字符
- 5. HTML字符實體（Character Entities）與 轉義字符串（Escape Sequence）（轉）
- 6. html 轉換成字符串，字符轉義
- 7. HTML字符實體（Character Entities），轉義字符串（Escape Sequence） 轉
- 8. json字符串轉換爲html字符串
- 9. 字符串轉爲數字。字符串轉爲數組。
- 10. HTML字符實體和轉義字符串大全
- 更多相關文章...
- • Thymeleaf字符串轉義 - Thymeleaf 教程
- • R 字符串 - R 語言教程
- • RxJava操作符（十）自定義操作符
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
