javascript - unescape 将中文字符转换为不可读的内容

Question

我有一个 SVG 字符串，如下面的代码示例所示。我用它作为背景图片。

为了将其转换为图像，我正在执行以下步骤:

 var asImage = "data:image/svg+xml; base64," + window.btoa(unescape(encodeURIComponent(markupDataStr)));

但问题是，SVG 包含一些中文文本测试。当我运行 encodeURIComponent 和 unescape 时，它会将中文文本转换为一些不可读的字符，例如 æ¸è©…。

但是在这个例子中，它不会改变上面的文本。我在这里遗漏了什么吗？

var str = window.holder.value;

var asImage = "data:image/svg+xml; base64," + unescape(encodeURIComponent(str));

console.log(str);

<textarea id="holder">
 <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;left:0;top:0;-ms-transform:scale(1, -1);-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1);cursor:crosshair"
    class="design-review-container" viewBox="-1331.9027181688125 -1000 2663.805436337625 2000" width="931" height="699" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g type="Pencil" guid="b36bf28d-78f7-434a-9601-ee1b7e3cb645">
        <path fill="none" stroke="rgba(255,40,79,1)" stroke-width="21.459227467811047" undefined="#ff284f" transform="translate(96.99569069094242, -24.034317300384487) rotate(0)"
            guid="b36bf28d-78f7-434a-9601-ee1b7e3cb645" d="M5.5317294330442195 128.46922431039877 L11.444938779729966 128.4692243103988 L17.657896065648615 128.06047712053572 L23.334940369302373 127.19756638638036 L25.751090424937402 126.75248611297391 L31.473551083020382 125.32187094845317 L37.19601174110336 123.89125578393244 L43.776841497898815 120.7439024219868 L50.35767125469421 117.59654906004114 L56.36625494568132 113.59082659938306 L62.37483863666846 109.58510413872497 L67.81117626184725 104.72101257935444 L73.24751388702607 99.85692101998391 L78.68385151220495 94.42058339480509 L84.12018913738378 88.98424576962626 L88.98428069675428 82.97566207863913 L93.84837225612482 76.96707838765201 L96.99572561807044 71.24461772956903 L100.14307898001606 65.52215707148605 L102.71818627615339 59.22745034759479 L105.29329357229075 52.93274362370352 L107.58227783552393 46.06579083400395 L109.87126209875713 39.198838044304374 L111.30187726327789 32.04576222170065 L112.73249242779865 24.892686399096934 L113.59086152651106 17.739610576493213 L114.44923062522356 10.586534753889492 L115.02147669103185 3.7195819641899206 L115.59372275684011 -3.147370825509647 L115.59372275684011 -9.442077549400928 L115.59372275684011 -15.736784273292201 L114.73535365812766 -21.745367964279318 L113.87698455941522 -27.75395165526644 L112.44636939489446 -33.47641231334942 L111.01575423037373 -39.1988729714324 L107.86840086842811 -45.20745666241953 L104.72104750648244 -51.216040353406655 L100.42920201292024 -57.224624044393764 L96.137356519358 -63.23320773538089 L90.41489586127501 -69.24179142636801 L84.69243520319206 -75.25037511735513 L78.11160544639664 -80.4005897096298 L71.53077568960119 -85.55080430190449 L62.947084702476715 -91.27326495998746 L54.3633937153523 -96.99572561807042 L46.06582576113199 -101.28757111163267 L37.76825780691165 -105.57941660519492 L28.89844378688302 -109.29901603294886 L20.028629766854422 -113.01861546070279 L10.872692713921666 -116.16596882264841 L1.716755660988909 -119.31332218459406 L-7.725304424848005 -121.88842948073142 L-17.16736451068492 -124.46353677686875 L-25.17880943200109 -125.60802890848535 L-33.19025435331724 -126.75252104010195 L-41.20169927463342 -127.6108901388144 L-49.21314419594958 -128.46925923752684 L-56.93846608436159 -128.1831362046227 L-64.6637879727736 -127.89701317171853 L-70.95849469666489 -126.4663980071978 L-77.25320142055615 -125.03578284267704 L-83.54790814444743 -121.60230644782723 L-89.8426148683387 -118.16883005297743 L-96.28038310868206 -115.45066124038806 L-102.24127962751848 -110.92037988607237 L-107.00999684258764 -104.72104750648248 L-115.5936878297121 -94.70674135483726 "
            style="pointer-events: none;" />
    </g>
    <g type="Text" clip-path="url(#29caee92-3443-41a7-9897-efc666d77842)" guid="29caee92-3443-41a7-9897-efc666d77842">
        <rect fill="rgba(255,40,79,0)" stroke="rgba(255,40,79,1)" stroke-width="21.459227467811047" undefined="#ff284f" font-size="51.50214592274665"
            text-decoration="normal" font-style="normal" font-weight="normal" font-family="Helvetica Neue" transform="translate(-396.2804005722461, -22.019982508494266) rotate(0) scale(1, -1)"
            guid="29caee92-3443-41a7-9897-efc666d77842" x="-257.51072961373393" y="-89.25889524096924" height="178.53339592274642"
            width="515.0214592274677" style="pointer-events: none;" />
        <text alignment-baseline="middle" style="pointer-events:none" fill="#ff284f" undefined="#ff284f" font-size="51.50214592274665"
            text-decoration="normal" font-style="normal" font-weight="normal" font-family="Helvetica Neue" transform="translate(-396.2804005722461, -22.019982508494266) rotate(0) scale(1, -1)"
            guid="29caee92-3443-41a7-9897-efc666d77842">
            <tspan x="-231.75965665236072" y="-22.306105541398594">t4mkgl35yhm5y</tspan>
            <tspan x="-231.75965665236072" y="44.64668415817205">測試</tspan>
        </text>
        <clipPath id="29caee92-3443-41a7-9897-efc666d77842" style="pointer-events: none;">
            <rect guid="29caee92-3443-41a7-9897-efc666d77842" fill="rgba(255,40,79,0)" stroke="rgba(255,40,79,1)" stroke-width="21.459227467811047"
                undefined="#ff284f" font-size="51.50214592274665" text-decoration="normal" font-style="normal" font-weight="normal"
                font-family="Helvetica Neue" transform="translate(-396.2804005722461, -22.019982508494266) rotate(0) scale(1, -1)"
                x="-257.51072961373393" y="-89.25889524096924" height="178.53339592274642" width="515.0214592274677" />
        </clipPath>
    </g>
</svg>
</textarea>

Answer 1

当使用encodeURIComponent进行编码时，使用decodeURIComponent进行解码；

使用escape编码时，使用unescape解码。

所以，unescape(encodeURIComponent(markupDataStr)) 应该是decodeURIComponent(encodeURIComponent(markupDataStr))

顺便说一句，不建议转义。