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

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

<!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
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有