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码点
var ucode = "赵".charCodeAt(); // 返回十进制36213
var hexCode = "赵".charCodeAt().toString(16); // 返回十六进制字符串"8d75"
### 通过码点生成字符
String.fromCharCode(36213); // 返回"赵"
## 正则表达式实现&#编码与字符互转
原文提供了两个实用函数，用于将HTML实体中的&#编码转换为真实字符，或将字符转换为&#编码。这些函数在前端数据清洗、富文本编辑或爬虫解析中非常有用。
### 将&#xhhhh或&#dddd转换为字符
function uncode(str) {
return str.replace(/&#(x)?([^&]{1,5});?/g, function(a, b, c) {
return String.fromCharCode(parseInt(c, b ? 16 : 10));
});
}
**参数说明**：
- `str`：包含&#编码的字符串。
- 正则表达式`/&#(x)?([^&]{1,5});?/g`：匹配以“&#”开头，可选“x”（表示十六进制），后接1到5个非“&”字符，可选分号结束。
- 回调函数：`b`为捕获的“x”或undefined，`c`为编码数字的字符串。`parseInt(c, b ? 16 : 10)`根据是否含“x”决定基数，然后用`String.fromCharCode`转换为字符。
### 将字符串中的字符转换为&#dddd编码
function encode(str) {
var a = [], i = 0;
for (; i < str.length; ) {
a = str.charCodeAt(i ++);
}
return "&#" + a.join(";&#") + ";";
}
**调用示例**：
encode("赵A"); // 返回"赵A"
该函数遍历字符串每个字符，获取其十进制Unicode码点，然后拼接成&#编码形式，以分号分隔。注意，此实现会跳过正则转义，对于普通文本转换足够。
## 实际开发中的注意事项
1. **字符集兼容性**：并非所有Unicode字符在旧版浏览器或操作系统上都能正常渲染，尤其是一些冷门符号。建议在目标环境中进行测试。
2. **编码转换的边界情况**：当字符串包含多字节字符（如Emoji）时，`charCodeAt`只能返回基本平面码点，应改用`codePointAt`以支持完整Unicode。如需处理代理对，可参考以下改进版：
function encodeFull(str) {
var codes = [];
for (var cp of str) {
codes.push(cp.codePointAt(0));
}
return "&#" + codes.join(";&#") + ";";
}
3. **正则回溯风险**：上述`uncode`函数中的正则使用了`[^&]{1,5}`，当输入字符串较长且含大量“&”时可能性能下降。若需处理大量数据，建议使用更精确的匹配（如限定数字和x），或改用逐字符解析。
## 总结
掌握Unicode在HTML/CSS/JavaScript中的表示方法，以及利用正则表达式进行编码转换，能帮助开发者灵活处理多语言文本、特殊符号和HTML实体。文中提供的两个函数可即拷即用，适用于前端模板渲染、用户输入过滤等场景。注意根据实际字符范围选用正确的码点获取方法，并关注浏览器兼容性。
Re: JavaScript中Unicode字符编码转换与正则表达式应用实践
感谢楼主分享这么实用的Unicode编码转换知识！两个函数的设计很巧妙，特别是正则匹配部分考虑了可选x前缀和分号，覆盖了常见的HTML实体格式。确实在实际开发中，处理用户输入或爬取数据时常会遇到这类编码，直接拿来用能省不少时间。 关于那个改进版的encodeFull函数，使用了for-of遍历和codePointAt，对Emoji等四字节字符的支持更完善了，这个提醒很好。另外，正则匹配里限定数字范围或许能进一步提高性能，比如改成`&#(x)?({1,5});?`来避免匹配到其他以&开头的字符，不过具体看实际数据场景就好。 总之这篇文章干货满满，从基础概念到具体实现都讲清楚了，收藏了！Re: JavaScript中Unicode字符编码转换与正则表达式应用实践
这篇教程非常实用，正好最近在做富文本编辑器的数据清洗，涉及很多Unicode实体转换。楼主提供的`uncode`和`encode`函数简洁高效，正则表达式也写得很清晰。特别是提醒了`codePointAt`处理Emoji和代理对的情况，这个坑以前踩过。测试了示例代码，在Chrome和Node.js下都能正常工作，感谢分享！Re: JavaScript中Unicode字符编码转换与正则表达式应用实践
感谢楼主的详细分享！最近正好在做一个多语言输入处理的组件，遇到了一些特殊符号的转码问题，你的这两个函数很实用。关于Unicode处理，我补充一个小点：当使用`codePointAt`遍历字符串时，可以用`for...of`循环，但对较长的字符串性能可能稍逊于传统for循环，不过可读性更好。另外，我注意到`encode`函数里最后拼接分号的方式，如果字符串为空可能会返回“&#;”，实际使用时可以加个空值判断。你提到正则回溯风险很有启发，我之后会考虑用更严格的数字范围匹配。再次感谢分享！
页:
[1]