如何使用转义的 unicode 解码字符串？

Question

我不确定这叫什么，所以我在搜索时遇到了麻烦。如何使用 JavaScript 将带有 unicode 的字符串从 http\u00253A\u00252F\u00252Fexample.com 解码为 http://example.com？我尝试了 unescape、decodeURI 和 decodeURIComponent 所以我猜剩下的就是字符串替换。

编辑：该字符串不是键入的，而是来自另一段代码的子字符串。因此，要解决这个问题，您必须从这样的事情开始：

var s = 'http\\u00253A\\u00252F\\u00252Fexample.com';

我希望这能说明为什么 unescape() 不起作用。

Answer 1

编辑 (2017-10-12)：

@MechaLynx 和 @Kevin-Weber 注意到 unescape() 在非浏览器环境中已弃用，并且在 TypeScript 中不存在。 decodeURIComponent 是一个直接替代品。为了获得更广泛的兼容性，请改用以下内容：

decodeURIComponent(JSON.parse('"http\\u00253A\\u00252F\\u00252Fexample.com"'));
> 'http://example.com'

原始答案：

unescape(JSON.parse('"http\\u00253A\\u00252F\\u00252Fexample.com"'));
> 'http://example.com'

您可以将所有工作卸载到 JSON.parse

Answer 2

更新：请注意，这是一个适用于较旧的浏览器或非浏览器平台的解决方案，并且出于教学目的而保持活动状态。请参阅下面 @radicand 的答案以获得更新的答案。

---

这是一个 unicode 转义字符串。首先对字符串进行转义，然后使用 unicode 进行编码。转换回正常状态：

var x = "http\\u00253A\\u00252F\\u00252Fexample.com";
var r = /\\u([\d\w]{4})/gi;
x = x.replace(r, function (match, grp) {
    return String.fromCharCode(parseInt(grp, 16)); } );
console.log(x);  // http%3A%2F%2Fexample.com
x = unescape(x);
console.log(x);  // http://example.com

解释一下：我使用正则表达式来查找 \u0025。但是，由于我只需要该字符串的一部分来进行替换操作，因此我使用括号来隔离要重用的部分，0025。这个孤立的部分称为群。

表达式末尾的 gi 部分表示它应该匹配字符串中的所有实例，而不仅仅是第一个实例，并且匹配应该不区分大小写。考虑到这个例子，这可能看起来没有必要，但它增加了多功能性。

现在，要从一个字符串转换为下一个字符串，我需要对每个匹配的每一组执行一些步骤，而我无法通过简单地转换字符串来做到这一点。有用的是，String.replace 操作可以接受一个函数，该函数将为每次匹配执行。该函数的返回将替换字符串中的匹配本身。

我使用该函数接受的第二个参数，这是我需要使用的组，并将其转换为等效的 utf-8 序列，然后使用内置的 unescape 函数将字符串解码为其正确的形式。

Answer 3

请注意，unescape() 的使用是 已弃用并且不适用于 TypeScript 编译器。

根据 Radicand 的回答和下面的评论部分，这是一个更新的解决方案：

var string = "http\\u00253A\\u00252F\\u00252Fexample.com";
decodeURIComponent(JSON.parse('"' + string.replace(/\"/g, '\\"') + '"'));

http://example.com

Answer 4

为此使用 JSON.decode 会带来一些必须注意的重大缺点：

• 必须将字符串用双引号引起来
• 许多字符不受支持，必须自行转义。例如，将以下任何内容传递给 JSON.decode （将它们用双引号括起来后）将会出错，即使这些内容都是有效的：\\n、 \n, \\0, a"a
• 不支持十六进制转义： \\x45
• 不支持 Unicode代码点序列：\\u{045}

这里本质上，使用 JSON.decode 来实现此目的是一种黑客行为，并且不会按照您期望的方式工作。您应该坚持使用 JSON。 > 处理 JSON 的库，而不是用于字符串操作的库。

---

我最近自己遇到了这个问题，并且想要一个强大的解码器，所以我最终自己编写了一个完整且经过彻底测试的库，可以在此处找到：https://github.com/iansan5653/unraw。它尽可能地模仿 JavaScript 标准。

说明：

源代码大约有 250 行，所以我不会在这里全部包含。但本质上它使用以下正则表达式来查找所有转义序列，然后使用 parseInt(string, 16) 解析它们以解码基 16 数字，然后String.fromCodePoint(number) 获取相应的字符：

/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g

已注释（注意：此正则表达式匹配所有转义序列，包括无效序列。如果字符串在 JS 中抛出错误，它也会在我的库中抛出错误 [即 '\x!!' 将出错]）：

/
\\ # All escape sequences start with a backslash
(?: # Starts a group of 'or' statements
(\\) # If a second backslash is encountered, stop there (it's an escaped slash)
| # or
x([\s\S]{0,2}) # Match valid hexadecimal sequences
| # or
u(\{[^}]*\}?) # Match valid code point sequences
| # or
u([\s\S]{4})\\u([^{][\s\S]{0,3}) # Match surrogate code points which get parsed together
| # or
u([\s\S]{0,4}) # Match non-surrogate Unicode sequences
| # or
([0-3]?[0-7]{1,2}) # Match deprecated octal sequences
| # or
([\s\S]) # Match anything else ('.' doesn't match newlines)
| # or
$ # Match the end of the string
) # End the group of 'or' statements
/g # Match as many instances as there are

示例

使用该库：

import unraw from "unraw";

let step1 = unraw('http\\u00253A\\u00252F\\u00252Fexample.com');
// yields "http%3A%2F%2Fexample.com"
// Then you can use decodeURIComponent to further decode it:
let step2 = decodeURIComponent(step1);
// yields http://example.com

Answer 5

我没有足够的代表将其放在对现有答案的评论下：

unescape 仅在使用 URI（或任何编码的 utf-8）时被弃用，这可能是大多数人的需求。 encodeURIComponent 将 js 字符串转换为转义的 UTF-8，而 decodeURIComponent 仅适用于转义的 UTF-8 字节。它会抛出类似 decodeURIComponent('%a9'); 的错误。 // 错误，因为扩展 ascii 不是有效的 utf-8（即使它仍然是 unicode 值），而 unescape('%a9'); // © 所以在使用decodeURIComponent时你需要知道你的数据。

decodeURIComponent 不适用于 "%C2" 或 0x7f 上的任何单独字节，因为在 utf-8 中表示代理项的一部分。然而 decodeURIComponent("%C2%A9") //gives you © Unescape 无法在该 // © 上正常工作并且不会抛出错误，因此，如果您不知道自己的数据，则 unescape 可能会导致错误代码。

Answer 6

这不是这个确切问题的答案，但对于那些通过搜索结果访问此页面并尝试（像我一样）在给定转义代码点序列的情况下构造单个 Unicode 字符的人，请注意，您可以传递多个String.fromCodePoint() 如下所示：

String.fromCodePoint(parseInt("1F469", 16), parseInt("200D", 16), parseInt("1F4BC", 16)) // 

Answer 7

就我而言，我试图unescape HTML文件，就像

"\u003Cdiv id=\u0022app\u0022\u003E\r\n    \u003Cdiv data-v-269b6c0d\u003E\r\n        \u003Cdiv data-v-269b6c0d class=\u0022menu\u0022\u003E\r\n    \u003Cdiv data-v-269b6c0d class=\u0022faux_column\u0022\u003E\r\n        \u003Cdiv data-v-269b6c0d class=\u0022row\u0022\u003E\r\n            \u003Cdiv data-v-269b6c0d class=\u0022col-md-12\u0022\u003E\r\n"  

下面

<div id="app">
    <div data-v-269b6c0d>
        <div data-v-269b6c0d class="menu">
    <div data-v-269b6c0d class="faux_column">
        <div data-v-269b6c0d class="row">
            <div data-v-269b6c0d class="col-md-12">

的例子适用于我的情况：

const jsEscape = (str: string) => {
  return str.replace(new RegExp("'", 'g'),"\\'");
}

export const decodeUnicodeEntities = (data: any) => {
  return unescape(jsEscape(data));
}

// Use it
const data = ".....";
const unescaped = decodeUnicodeEntities(data); // Unescaped html