javascript转义unicode十六进制编码且带有反斜杠…

2018-12-24 09:10:05来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

<!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方法会报错,应该代码格式不对。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:ES6学习之关键字

下一篇:ES6之Promise学习与实践