<!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方法会报错，应该代码格式不对。
javascript转义unicode十六进制编码且带有反斜杠后的html的更多相关文章
-
Apache伪静态在网站目录没有反斜杠后自动添加反斜杠
第一步:确认网站开启REWRITE规则 一般有两种情况: i.apache安装的时候已经包含rewrite功能 ii.后续配置的时候新添加mod_rewrite.so.这种情况需要在httpd.con ...
-
MySQL中如何插入反斜杠，反斜杠被吃掉，反斜杠转义
问题描述:mysql中带有反斜杠的内容入库后,发现反斜杠无故失踪了(俗话说被吃掉了) 例:插入insert into tb('url') values('absc\eeee'); 结果数据库里的内容是 ...
-
RestTemplate接收HashMap变为LinkedHashMap，RestTemplate接收数据后转成json数据出现反斜杠
使用postForObject方法远程调用接口,正常会返回List<HashMap>,然而实际上却返回List<LinkedHashMap>,同时将此数据进行json转换,变成 ...
-
关于C# webapi ，接口返回字符串和json格式 ，返回值中有反斜杠
最近遇到一个比较郁闷的问题,记录一下 写了一个接口,想返回json 数据,但是返回值中总是带有反斜杠... ,下面来看原因 首先,配置 webapi的路由 App_Start 文件夹下 ,WebApi ...
-
python 中的反斜杠匹配的问题
关于反斜杠的匹配问题可以参考: https://www.cnblogs.com/mzc1997/p/7689235.html 文章中提出了两个概念: 字符串转义和正则转义,我觉得是理解反斜杠的关键所在 ...
-
javascript 反斜杠\
通常,我们在动态给定一个div的innerHTML时,通常是样做的: <div id="demo1" /> <SCRIPT> var demo= docum ...
-
PHP，JAVA,JAVASCRIPT的正则表达式里的反斜杠\的不通之处
我的博客:www.while0.com 首先,java和javascript强制字符串输出\必须用\转义,所以要输出一个\,java和javascript都要两个\: java代码: String s ...
-
encodeURIComponent编码反斜杠 \ （正则匹配）
记录一个小bug... 前言废话: 1. 功能需求:修改输入框的内容,获取字符串传给后端保存. 2. bug历程:刚开始直接获取value值传过去.后来测试发现%&这些特殊字符无法传递后,在前 ...
-
JavaScript 使用反斜杠对代码行进行折行
JavaScript对代码行进行折行-使用反斜杠 您可以在文本字符串中使用反斜杠对代码行进行换行.下面的例子会正确地显示: <html> <head> <script t ...
随机推荐
-
如何用代码读取Office Online Server2016的文档的备注信息
前言 在一个项目上客户要求读取office online server 2016的对文档的备注信息,如下图: 以前思路老纠结在OOS这个在线上,总有以为这个信息存储在某个列表中,其实错了,这个备注信息 ...
-
listview的ViewHolder优化
1.自定义listview,首先在activity.xml中插入一个listview,可以用android:divider=""设置分割线颜色样式,android:dividerH ...
-
2.7---判断链表是否是回文（CC150）
注意,如果用的方法是翻转整个链表,那么链表都被改变了.就无法做了. 此外注意fast.next.next!= null;不然也会报错.要保证后面的比前面的少. 答案: public static bo ...
-
jquery选择器效率优化问题
jquery选择器效率优化问题 jquery选择器固然强大,但是使用不当回导致效率问题: 1.要养成将jQuery对象缓存进变量的习惯 //不好的写法 $('#btn').bind("c ...
-
给新centos系统虚拟机配置网络服务
记录下今天新建虚拟机的过程吧. 镜像:CentOS-6.3-x86_64-minimal; 虚拟机版本: vm 8.0 LET'S----------------------->GO 手动新建一 ...
-
Gson-记录一个空格引发的json血案
使用的Gson将json自动装载到Bean,一般情况下,用起来又快又稳. 直到有一天,测试告诉我说,填写地址时,地址里有空格,就会500异常. 我把异常截取出来: Type Exception Rep ...
-
S5PV210时钟，看门狗定时器
晶振:时钟源(操作主要有两个,倍频,分频) A8的时钟源: 时钟域,每个时钟域(不同的最高频率和最低频率)管理着不同的电路模块: 不同的时钟域对应不同电路模块表 时钟电路:懂得看时钟电路(时钟源选择开 ...
-
Linux samba多用户挂载
samba 多用户挂载 通过multiuser挂载选项,使用基于密码验证和cifscreds实现访问控制在默认情况下,samba共享挂载后,是通过挂载时的验证来实现对挂载资源的访问控制.通过新的mul ...
-
强化学习---A3C
Asynchronous Advantage Actor-Critic (A3C) 在RL任务中,我们本质上最终要学习的是策略(Policy) value-based方法:间接方法,即通过学习值函数( ...
-
Objective-C中的alloc和init问题
从开始学的NSString *name=[[NSString alloc] init] 起,仅仅这句话是分配内存空间,一直在用,从来没考虑过它的内部是怎么实现的.今天无意中看到了这一句代码: NSSt ...