<!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的更多相关文章

  1. Apache伪静态在网站目录没有反斜杠后自动添加反斜杠

    第一步:确认网站开启REWRITE规则 一般有两种情况: i.apache安装的时候已经包含rewrite功能 ii.后续配置的时候新添加mod_rewrite.so.这种情况需要在httpd.con ...

  2. MySQL中如何插入反斜杠，反斜杠被吃掉，反斜杠转义

    问题描述:mysql中带有反斜杠的内容入库后,发现反斜杠无故失踪了(俗话说被吃掉了) 例:插入insert into tb('url') values('absc\eeee'); 结果数据库里的内容是 ...

  3. RestTemplate接收HashMap变为LinkedHashMap，RestTemplate接收数据后转成json数据出现反斜杠

    使用postForObject方法远程调用接口,正常会返回List<HashMap>,然而实际上却返回List<LinkedHashMap>,同时将此数据进行json转换,变成 ...

  4. 关于C# webapi ，接口返回字符串和json格式 ，返回值中有反斜杠

    最近遇到一个比较郁闷的问题,记录一下 写了一个接口,想返回json 数据,但是返回值中总是带有反斜杠... ,下面来看原因 首先,配置 webapi的路由 App_Start 文件夹下 ,WebApi ...

  5. python 中的反斜杠匹配的问题

    关于反斜杠的匹配问题可以参考: https://www.cnblogs.com/mzc1997/p/7689235.html 文章中提出了两个概念: 字符串转义和正则转义,我觉得是理解反斜杠的关键所在 ...

  6. javascript 反斜杠\

    通常,我们在动态给定一个div的innerHTML时,通常是样做的: <div id="demo1" /> <SCRIPT> var demo= docum ...

  7. PHP，JAVA,JAVASCRIPT的正则表达式里的反斜杠\的不通之处

    我的博客:www.while0.com 首先,java和javascript强制字符串输出\必须用\转义,所以要输出一个\,java和javascript都要两个\: java代码: String s ...

  8. encodeURIComponent编码反斜杠 \ （正则匹配）

    记录一个小bug... 前言废话: 1. 功能需求:修改输入框的内容,获取字符串传给后端保存. 2. bug历程:刚开始直接获取value值传过去.后来测试发现%&这些特殊字符无法传递后,在前 ...

  9. JavaScript 使用反斜杠对代码行进行折行

    JavaScript对代码行进行折行-使用反斜杠 您可以在文本字符串中使用反斜杠对代码行进行换行.下面的例子会正确地显示: <html> <head> <script t ...

随机推荐

  1. （转）为什么不能从静态的方法里面调用非静态方法,或变量and类加载机制

    1. 程序最终都将在内存中执行,变量只有在内存中占有一席之地时才能被访问. 类的静态成员(变量和方法)属于类本身,在类加载的时候就会分配内存,可以通过类名直接去访问:非静态成员(变量和方法)属于类的对 ...

  2. Python 数据结构和算法

    阅读目录 什么是算法 算法效率衡量 算法分析 常见时间复杂度 Python内置类型性能分析 数据结构 顺序表 链表 栈 队列 双端队列 排序与搜索 冒泡排序 选择排序 插入排序 希尔排序 快速排序 归 ...

  3. keras 的svm做分类

    SVC继承了父类BaseSVC SVC类主要方法: ★__init__() 主要参数: C: float参数 默认值为1.0 错误项的惩罚系数.C越大,即对分错样本的惩罚程度越大,因此在训练样本中准确 ...

  4. 解决 main(int argc, char** argv)这种情况下通过命令行传参，改为main函数里面给定参数。

    本文是原创文章,未经允许,请勿转载. 原来程序中是通过运行exe,然后加上参数,然程序运行起来的.也就是main(int argc, char** argv)这里是通过argv参数是从命令行 传过来的 ...

  5. poj3268 Silver Cow Party（两次dijkstra）

    https://vjudge.net/problem/POJ-3268 一开始floyd超时了.. 对正图定点求最短,对逆图定点求最短,得到任意点到定点的往返最短路. #include<iost ...

  6. 【总结】瞬时高并发（秒杀/活动）Redis方案

    1,Redis 丰富的数据结构(Data Structures) 字符串(String) Redis字符串能包含任意类型的数据 一个字符串类型的值最多能存储512M字节的内容 利用INCR命令簇(IN ...

  7. ARMv8学习 —— SP_EL0和SP_ELx

    在AArch64状态下,SP对应的物理寄存器有如下四个(某一时刻只能对应下面其中一个): SP_EL0和SP_EL1 SP_EL2 SP_EL3 如何使用呢? 1.如果程序运行在EL0,那么使用的是S ...

  8. thymeleaf学习笔记

    1.${@dict.hello().fatherName} 显示对象的属性2.${@dict.hello()[0].fatherName} 显示列表对象的属性3.<div th:object=& ...

  9. testng + reportng 测试结果邮件发送

    https://blog.csdn.net/qq744746842/article/details/51497506 其实大多数的时候我们的测试报告的发送可能都是结合Jenkins发送的,所以这方面更 ...

  10. Centos PHP+Apache执行exec()等Linux脚本权限设置的详细步骤

    1. 查看一下你的Apache的执行用户是谁: lsof -i:80         运行之后的结果为: 从图中我们可以清楚的看到,httpd(也就是Apache)的执行用户为:exec_shell( ...