随着全球化的发展,越来越多的网站和应用需要支持多种语言和字符集,这就要求我们在前端开发中需要更加精确的使用正则表达式处理文本。在 Unicode 时代,使用传统的 ASCII 码方式的正则表达式处理多语言字符集数据显然是不够的。ES11 中提供了一些 Unicode 正则表达式的扩展技巧来应对这个问题。
Unicode 匹配模式
从 ES6 起,JavaScript 的正则表达式中支持 Unicode 匹配模式,它可以针对匹配 Unicode 字符集表现更加准确。在 ES11 中增加了两个 Unicode 匹配模式:
\p{...}
可以匹配所有具有某一种属性的字符,比如 \p{Letter}
匹配所有的字母字符。
const str = "this is 用中文编写的文本"; const match = str.match(/\p{Letter}+/gu); console.log(match); // ["this", "is", "用中文编写的文本"]
\P{...}
和 \p{...}
相反,可以匹配所有不具有某一种属性的字符,比如 \P{Letter}
匹配除字母字符以外的所有字符。
const str = "this is 用中文编写的文本"; const match = str.match(/\P{Letter}+/gu); console.log(match); // [" ", " ", " ", "的", "文本"]
Unicode 属性转义序列
在 ES6 中,正则表达式引入了 Unicode 属性转义序列。通过转义序列,可以匹配具有特定属性的 Unicode 字符。在 ES11 中增加了多个 Unicode 属性转义序列,常见的有:
\p{ID_Continue}
匹配所有可以作为标识符继续部分的 Unicode 字符(即字母、数字和下划线)。\p{Emoji}
匹配所有表情符号,这个转义序列可以帮助我们更加准确的处理包含表情符号的消息数据。
// 匹配包含表情符号的字符串 const str = "hello 😊👍 world"; const match = str.match(/\p{Emoji}+/gu); console.log(match); // ["😊", "👍"]
Unicode 属性值
在 Unicode 中,每个字符都可以有多个属性,包括一下几个方面:
- General_Category: Unicode 字符的分类,比如 Letter、Digit、Punctuation 等。
- Script: Unicode 字符所属的脚本,比如 Latin、CJK、Arabic 等。
- White_Space: 空白字符属性,包括空格、制表符等。
- Alphabetic: 是否为字母属性。
- Lowercase/Ltter_Uppercase/Letter_Titlecase/Uppercase: 大小写属性。
我们可以使用正则表达式中的 Unicode 属性值语法来匹配具有某个属性值的字符。
const str = "hello 你好😊"; // 匹配所有拉丁字母,并转成小写 const match = str.replace(/\p{Alphabetic}/gu, char => char.toLowerCase()); console.log(match); // "hello 你好😊"
使用示例
下面是一个结合上述技巧的完整示例,它将一个包含混合的中文和英文字符串进行过滤,只保留中文字符。
const str = "this is 你好,world!"; const match = str.match(/[\p{sc=Han}\p{sc=Kana}\p{sc=Hang}\p{sc=Hira}\p{sc=Bopo}\p{sc=Hani}\p{sc=Bugi}]+/gu); const chineseStr = match.join(""); console.log(chineseStr); // "你好"
这个示例中,我们结合使用了 Unicode 的分类属性和字母属性,只保留了中文字符并且将其字符串化输出。
总结
在前端开发中,Unicode 字符集的应用日益普及,有必要加深对 Unicode 正则表达式的掌握程度。通过本文的介绍,你可以理解 Unicode 正则表达式的扩展技巧,包括 Unicode 匹配模式、Unicode 属性转义序列和 Unicode 属性值等,这些技巧可以帮助我们更加精确地处理多语言字符集数据。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64af70c048841e9894b812b3