JavaScript中Unicode字符编码转换与正则表达式应用实践

脚本专家

在前端开发中，处理特殊字符和跨语言文本显示是常见需求。Unicode作为通用字符集，提供了全球文字和符号的统一编码方案。本文结合实际代码示例，讲解如何在HTML、CSS、JavaScript中使用Unicode字符，并提供实用的编码转换函数。

## Unicode编码基础

Unicode为每个字符分配一个唯一的码点，通常用4位十六进制表示（如U+2230）。在网页中引用Unicode字符时，不同环境有不同的语法：
- HTML：使用&#dddd（十进制）或&#xhhhh（十六进制），以分号结尾。例如，数学符号∰的十进制码点是2230，十六进制是2230，HTML中可写为∰或∰。
- CSS：使用反斜杠加十六进制码，例如content:"\2230"。
- JavaScript：使用\u加十六进制码，例如\u2230。

## JavaScript中的Unicode字符操作

JavaScript提供了`charCodeAt()`和`String.fromCharCode()`来处理字符与码点之间的转换。注意，`charCodeAt()`返回的是0x0000~0xFFFF之间的数值，对于超出基本多语言平面的字符（如部分Emoji），应使用`codePointAt()`和`String.fromCodePoint()`。

### 获取字符的Unicode码点

2. var ucode = "赵".charCodeAt(); // 返回十进制36213
3. var hexCode = "赵".charCodeAt().toString(16); // 返回十六进制字符串"8d75"

复制代码

### 通过码点生成字符

2. String.fromCharCode(36213); // 返回"赵"

复制代码

## 正则表达式实现&#编码与字符互转

原文提供了两个实用函数，用于将HTML实体中的&#编码转换为真实字符，或将字符转换为&#编码。这些函数在前端数据清洗、富文本编辑或爬虫解析中非常有用。

### 将&#xhhhh或&#dddd转换为字符

2. function uncode(str) {
3.   return str.replace(/&#(x)?([^&]{1,5});?/g, function(a, b, c) {
4.     return String.fromCharCode(parseInt(c, b ? 16 : 10));
5.   });
6. }

复制代码

**参数说明**：
- `str`：包含&#编码的字符串。
- 正则表达式`/&#(x)?([^&]{1,5});?/g`：匹配以“&#”开头，可选“x”（表示十六进制），后接1到5个非“&”字符，可选分号结束。
- 回调函数：`b`为捕获的“x”或undefined，`c`为编码数字的字符串。`parseInt(c, b ? 16 : 10)`根据是否含“x”决定基数，然后用`String.fromCharCode`转换为字符。

### 将字符串中的字符转换为&#dddd编码

2. function encode(str) {
3.   var a = [], i = 0;
4.   for (; i < str.length; ) {
5.     a[i] = str.charCodeAt(i ++);
6.   }
7.   return "&#" + a.join(";&#") + ";";
8. }

复制代码

**调用示例**：

2. encode("赵A"); // 返回"&#36213;&#65;"

复制代码

该函数遍历字符串每个字符，获取其十进制Unicode码点，然后拼接成&#编码形式，以分号分隔。注意，此实现会跳过正则转义，对于普通文本转换足够。

## 实际开发中的注意事项

1. **字符集兼容性**：并非所有Unicode字符在旧版浏览器或操作系统上都能正常渲染，尤其是一些冷门符号。建议在目标环境中进行测试。
2. **编码转换的边界情况**：当字符串包含多字节字符（如Emoji）时，`charCodeAt`只能返回基本平面码点，应改用`codePointAt`以支持完整Unicode。如需处理代理对，可参考以下改进版：
   

2. function encodeFull(str) {
3.      var codes = [];
4.      for (var cp of str) {
5.        codes.push(cp.codePointAt(0));
6.      }
7.      return "&#" + codes.join(";&#") + ";";
8.    }

复制代码

3. **正则回溯风险**：上述`uncode`函数中的正则使用了`[^&]{1,5}`，当输入字符串较长且含大量“&”时可能性能下降。若需处理大量数据，建议使用更精确的匹配（如限定数字和x），或改用逐字符解析。

## 总结

掌握Unicode在HTML/CSS/JavaScript中的表示方法，以及利用正则表达式进行编码转换，能帮助开发者灵活处理多语言文本、特殊符号和HTML实体。文中提供的两个函数可即拷即用，适用于前端模板渲染、用户输入过滤等场景。注意根据实际字符范围选用正确的码点获取方法，并关注浏览器兼容性。

热心网友1

感谢楼主分享这么实用的Unicode编码转换知识！两个函数的设计很巧妙，特别是正则匹配部分考虑了可选x前缀和分号，覆盖了常见的HTML实体格式。确实在实际开发中，处理用户输入或爬取数据时常会遇到这类编码，直接拿来用能省不少时间。 关于那个改进版的encodeFull函数，使用了for-of遍历和codePointAt，对Emoji等四字节字符的支持更完善了，这个提醒很好。另外，正则匹配里限定数字范围或许能进一步提高性能，比如改成`&#(x)?([0-9a-fA-F]{1,5});?`来避免匹配到其他以&开头的字符，不过具体看实际数据场景就好。 总之这篇文章干货满满，从基础概念到具体实现都讲清楚了，收藏了！