CHANSHIYU
GITHUBZERO
  • README
  • 時雨
    • 2017
      • 01 网站动态标题的两种方式
      • 02 RN App 外部唤醒踩坑记
    • 2018
      • 01 不一样の烟火
      • 02 Python 之禅
      • 03 Python 文件操作
    • 2019
      • 01 Aurora 食用指南
      • 02 Godaddy 域名找回记事
      • 03 一个接口的诞生
      • 04 SpringMVC 前后端传参协调
      • 05 主题集成友链访问统计
      • 06 Github Style 博客主题
      • 07 字符编码の小常识
      • 08 WSL 安装 Docker 实录
      • 09 Eriri comic reader
      • 10 Aurora 2.0
      • 11 jsDelivr 全站托管
      • 12 两年工作台变迁史
      • 13 春物
      • 14 一种优雅の笔记方式
    • 2020
      • 01 Telegram 电报机器人
      • 02 她的眼里有星辰
      • 03 文心雕龙
      • 04 软萌木子の有趣笔谈
      • 05 Telegram RSS 订阅频道
      • 06 水月雨银色飞船
      • 07 五年前旧照
    • 2021
      • 01 春宵苦短 2020
      • 02 风花
    • 2022
      • 01 小城新貌
      • 02 原神满级纪念
    • 2023
      • 01 2022 逆旅
      • 02 半透明背景图实现
      • 03 新年攒台海景房
  • 前端
    • JavaScript
      • 01 JavaScript 秘密花园
      • 02 JavaScript 正则技巧
      • 03 从浏览器解析 JS 运行机制
      • 04 Canvas 基础用法
      • 05 Blob Url And Data Url
      • 06 函数节流与函数防抖
      • 07 排序算法初探
      • 08 洗牌算法实现数组乱序
      • 09 正则匹配 match 和 exec
      • 10 正则匹配汉字
      • 11 JSX.Element vs ReactElement
      • 12 可选链与空值合并
      • 13 TypeScript 编码规范
      • 14 Typescript 中 interface 和 type 区别
      • 15 TypeScript 高级类型
      • 16 TypeScript 关键字
      • 17 TypeScript 映射类型
    • CSS
      • 01 Flex 弹性布局
      • 02 Position 定位
      • 03 CSS 逻辑属性
    • Node
      • 01 Node Tips
      • 02 七天学会 NodeJS
    • Note
      • 01 Note
      • 02 Code
      • 03 Snippets
      • 04 Git
    • React
      • 01 React Props Children 传值
      • 02 Use a Render Prop!
      • 03 React Hook
      • 04 React Hook 定时器
      • 05 Fetch data with React Hooks
      • 06 React 和 Vue 中 key 的作用
      • 07 useCallback 的正确使用方式
      • 08 useLayoutEffect 和 useEffect 的区别
      • 09 forwardRef 逃生舱
      • 10 React 条件渲染
    • Vue
      • 01 Vue Tips
      • 02 Vue 构建项目写入配置文件
      • 03 Vue 项目引入 SVG 图标
      • 04 Vue 一键导出 PDF
      • 05 动态可响应对象
      • 06 Vue 引入 SCSS
      • 07 Vue 路由权限控制
    • 实战系列
      • 01 WebSocket 心跳重连机制
      • 02 图片加解密二三事
      • 03 优雅实现 BackTop
      • 04 动态加载 JS 文件
      • 05 常用 DOM 方法比较
      • 06 AbortController 中断 fetch
      • 07 计算字符所占字节数
      • 08 Axios 自定义返回值类型
  • 后端
    • Java
      • 01 面向对象基本特征与原则
      • 02 Java 数据类型
      • 03 Java String
      • 04 Java 只有值传递
      • 05 Java final 与 static
      • 06 Java Object 通用方法
      • 07 Java 继承
      • 08 Java 反射
      • 09 Java 异常
      • 10 Java 容器
      • 11 Java 虚拟机
      • 12 Java IO
      • 13 Java HashMap
      • 14 Java List
      • 15 Java Stream
      • 16 Java 枚举
      • 17 Java 日期与时间
      • 18 Java fail fast
      • 19 Java BiFunction 和 BinaryOperator
    • 并发编程
      • 01 Java 并发
      • 02 synchronized
      • 03 volatile
      • 04 ReentrantLock
      • 05 ReadWriteLock
      • 06 StampedLock
      • 07 CompletableFuture
      • 08 ForkJoin
      • 09 ThreadLocal
      • 10 CountDownLatch
      • 11 ThreadPoolExecutor
      • 12 ExecutorService
      • 13 Atom 原子类
      • 14 BlockingQueue
    • 高效编程
      • 01 30 seconds of java8
      • 02 函数式替代 for 循环
      • 03 Java 字符串拼接
      • 04 单例模式的几种实现
      • 05 HashMap 排序
    • 理论概念
      • 01 Java Servlet
      • 02 Java 服务端分层模型
      • 03 经典排序算法
      • 04 LRU 缓存淘汰算法
      • 05 BloomFilter 判断元素存在
      • 06 Java HashMap 面试大全
      • 07 HTTP 状态码详解
      • 08 Cookie 和 Session
      • 09 基于消息队列的分布式事务解决方案
      • 10 微服务之所见
    • 实战系列
      • 01 AES CBC 加解密
      • 02 Magic 魔数获取文件类型
      • 03 获取请求 IP 地址
      • 04 Kaptcha 与数学公式验证码
      • 05 Netty 获取客户端 IP.md
      • 06 高性能无锁队列 Disruptor.md
      • 07 前后端接入阿里云盾
    • Linux
      • 01 Linux 文件权限系统
      • 02 Linux 常用软件安装
      • 03 CentOS 防火墙
    • MySQL
      • 01 MySQL
      • 02 SQL 语句 where 1=1
      • 03 truncate 和 delete
      • 04 事务
      • 05 关系模型
      • 06 Mybatis
      • 07 MySQL 查看数据库表详情
    • Nginx
      • 01 Nginx 指北
      • 02 nginx gzip 压缩
    • Note
      • 01 Vagrant
      • 02 Docker
      • 03 Lombok
      • 04 Swagger
      • 05 Redis
    • Spring
      • 01 Spring Boot
      • 02 Spring Validation
      • 03 Spring Data
      • 04 Spring 容器
      • 05 Spring AOP
      • 06 Spring Transactional 注解
      • 07 Spring Cloud Netflix
      • 08 Spring Cloud Alibaba
      • 09 Spring Security oAuth2
      • 10 Spring Boot 跨域解决方式
      • 11 Spring Boot 请求拦截
      • 12 Spring Boot 异步编程
      • 13 Spring Boot 定时任务
      • 14 Spring Boot 管理 bean
      • 15 Mybatis 逆向代码生成
      • 16 JWT
      • 17 JPA
      • 18 Apache Shiro
      • 19 Spring 异步请求
  • 书斋
    • ES6 标准入门
      • 01 变量声明与解构赋值
      • 02 语法的扩展
      • 03 数据类型与数据结构
      • 04 Proxy 和 Reflect
      • 05 异步编程 Promise
      • 06 Iterator 和 for of 循环
      • 07 Generator 函数
      • 08 Async 函数
      • 09 Class 类
    • JavaScript 设计模式
      • 01 基础知识
      • 02 设计模式(上)
      • 03 设计模式(下)
      • 04 设计原则和编程技巧
  • 纸函
    • 01 Interview
    • 02 Ceph
    • 03 动态规划
    • 04 Document.designMode
    • 2023-01-10
  • 万藏
    • 文档
      • 01 Git 文档
      • 02 Linux 命令大全
      • 03 七天学会 NodeJS
      • 04 Algorithms
    • 工具
      • 01 Nginx Config
      • 02 ProcessOn
      • 03 Flat Icon
      • 04 Regexper
      • 05 TempMail
      • 06 Carbon
由 GitBook 提供支持
在本页
  • 汉文与汉字
  • 字符集和字符编码
  • 字符集
  • 字符编码
  • 正则匹配汉字
  • 兼容性

这有帮助吗?

  1. 前端
  2. JavaScript

10 正则匹配汉字

在此之前,项目中使用正则匹配汉字的表达式都是 /[\u4e00-\u9fa5]/,虽然常用,但是一直未深究其所以然。

汉文与汉字

首先,我们需要了解汉文和汉字这两个基础概念:

  • **汉文(Han Script)**是汉语、日本语、朝鲜语、韩国语的书写系统中的一种文字;

  • **汉字(CJK Ideograph)**是汉文的基本单元。

汉字文化圈中的许多国家或地区都对汉字提出了自己的编码标准,而 Unicode 将这些标准加总在一起进行统一编码,力求实现原标准与 Unicode 编码之间的无损转换。

字符集和字符编码

Unicode,GBK 和 UTF-8 有什么区别?很多人总是将它们混淆在一起,傻傻分不清,实际上它们不是同领域的概念。

字符集

我们常见的 Unicode、 ASCII 是一种字符集(character set),其作用是用一系列数字来表示字符(character),这些数字有时也称为码点(code points)。

例如 ASCII 码是美国制定了一套字符编码,ASCII 码使用一个字节来表示一个字符,一共规定了 128 个字符的编码,对应英语字符与二进制位之间的关系。

但对于一些亚洲国家的文字,比如中文,这些符号远远不够,必须使用多个字节表示一个符号。比如简体中文的 GB2312 编码方式,使用两个字节表示一个字符,最多可以表示 256 x 256 = 65536 个符号。

由于世界上存在着多种编码方式,同一个二进制数字可以被解释成不同的符号。如果用错误的编码方式解读一段文本,就会出现乱码。由此 Unicode 应运而生。

Unicode 是一个统一编码集合,类似于世界语,它将世界上所有符号都赋予了一个第一无二的编码。由于每个字符的编码都是唯一的,这样避免了字符编码混乱的问题。

字符编码

有了字符集,我们现在可以用任意数字来表示现实中的字符了。需要注意的是 Unicode 只是一个符号集,它只规定了符号的二进制代码,却没有规定这个二进制代码应该如何存储。所以字符要保存在计算机中,必须要先经过编码。

UTF-8 是 Unicode 的字符编码方式之一,同时也是互联网上使用最广的一种 Unicode 的实现方式。它规定了 Unicode 符号的存储方式。UTF-8 最大的一个特点,就是它是一种变长的编码方式。它可以使用 1~4 个字节表示一个符号,根据不同的符号而变化字节长度。

GBK(汉字内码扩展规范)和 UTF-8 类似,是一种中文字符编码方式。

总结:ASCII 和 Unicode 是一种字符集,而 UTF-8 和 GBK 是一种字符编码方式。两者不是一类事物, 是无法进行对比的。

正则匹配汉字

介绍完字符集和字符编码之后,回到正题,我们已经知道「汉字」是汉文的基本单元,但这里的「汉字」具体指代哪些字符集呢?

Unicode 从语义(semantic)、抽象字形(abstract shape),具体字形(typeface)三个维度出发,把不同编码标准里「起源相同、本义相同、形状一样或稍异」的汉字赋予相同编码,这些被编码的字符称为中日韩统一表意文字,即我们上面所提到的「汉字」。如果把它们全部列举出来写成正则表达式,那么就是技术上完整的匹配汉字的正则表达式了。

我们一开始所提到的正则表达式 /[\u4e00-\u9fa5]/ 匹配区域对应的是 Unicode 1.0.1 就收录进来的中日韩统一表意文字区块,在 Unicode 3.0 以前,这个正则表达式确实给出了所有汉字的编码。换言之,从 1992 年到 1999 年,这个正则表达式确实是正确的,想必这个表达式已经有 20 年了。

然而时光飞逝,Unicode 在 2017 年 6 月发布了 10.0.0 版本。在这 20 年间,Unicode 添加了许多汉字。这些新增的汉字并不在上面这个正则表达式匹配的区域中,所以我们的正则也需要与时俱进匹配最新的 Unicode 标准。

而这个问题的标准答案正则即是:

const HanZi = /\p{Unified_Ideograph}/u
  • \u是 ECMAScript 2015 定义的正则表达式标志,意味着将表达式作为 Unicode 码点序列;

  • \p是 ECMAScript 2018 定义的正则表达式 Unicode 属性转义,它赋予了我们根据 Unicode 字符的属性数据构造表达式的能力;

  • Unified_Ideograph 是 Unicode 字符的一个二值属性,对于汉字,其取值为 Yes,否则为 No。

因此 \p{Unified_Ideograph} 匹配所有满足 Unified_Ideograph=yes 的 Unicode 字符,而它的底层实现由运行时所依赖的 Unicode 版本决定,开发者不需要知道汉字的具体 Unicode 码点范围。

兼容性

Chrome 64 以上以及 Safari 11.1 以上都支持正则表达式 Unicode 属性转义。对于其他浏览器,推荐使用 7.7 版本的 @babel/env 转译配置将带有属性转义的正则表达式转为 Unicode 码点正则表达式。

{
  "presets": ["@babel/env"]
}
上一页09 正则匹配 match 和 exec下一页11 JSX.Element vs ReactElement

最后更新于2年前

这有帮助吗?

参考文章:

JavaScript 正则表达式匹配汉字