<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.container{
padding:30px 60px;
}
.wrap{
padding:10px 0;
}
.textarea{
width: 98%;
border: 1px solid #dcdee2;
height: 320px;
resize: vertical;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 10px;
margin-bottom:10px;
}
.btn{
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 5px 15px 6px;
font-size: 12px;
border-radius: 4px;
transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;
color: #515a6e;
background-color: #fff;
border-color: #dcdee2;
}
.btn-primary {
color: #fff;
background-color: #2d8cf0;
border-color: #2d8cf0;
font-size: 15px;
margin-bottom:20px;
}
.btn-primary:hover {
color: #fff;
background-color: #57a3f3;
border-color: #57a3f3;
}
.btn:focus {
outline: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>在线转义html代码</h1>
<p>粘贴代码（unicode十六进制代码）</p>
<div>
<textarea name="" class="textarea" id="response-html" placeholder="粘贴response填充代码，形如：\u003c!doctype html\u003e \u003chtml\u003e \u003chead\u003e \u003ctitle\u003eMintegral Interactive Ad\u003c/title\u003e \u003clink href=https://cdn.bootcss.com/Swiper/4.3.2/css/swiper.min.css rel=stylesheet\u003e \u003cmeta name=viewport content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"/\u003e \u003cmeta name=author content=Mintegral\u003e \u003cmeta http-equiv=Content-Type content=\"text/html; charset=utf-8\"\u003e \u003cstyle\u003eg/1.jpg)\u003e \u003cdiv class=obg\u003e\u003c/div\u003e \u003ca …………"></textarea>
<button class="btn btn-primary" type="button" id="btn-transfer">转义</button>
<textarea name="" class="textarea" id="transfer-html"></textarea>
</div>
</div>
<script>
//转义html代码
function decodeUnicode(str) {
//先把十六进制unicode编码/u替换为%u
str = str.replace(/\\u/gi,'%u');
//再把页面中反斜杠替换为空
str = str.replace(/\\/gi,'');
return unescape(str);
}
let btn=document.getElementById("btn-transfer");
let responseHtml=document.getElementById("response-html");
let transferHtml=document.getElementById("transfer-html");
btn.onclick=function () {
//获取当前转义前html
let html=responseHtml.value;
//输出转义后html
transferHtml.value=decodeUnicode(html);
}
</script>
</body>
</html>
由于后端返回的html代码中所有标签前后都有反斜杠“\”，且有\uxxxx形式的十六进制unicode编码，如果直接把所有反斜杠替换为%，则会把标签前后的反斜杠一并替换，导致最后无法转义，所以先把十六进制开头的\u替换为%u，则可以使用unescape转码，然后再单独把反斜杠替换为空返回即可。这里使用decodeURI或者decodeURIComponent方法会报错，应该代码格式不对。