常见正则表达式及相关文档和工具推荐

暗冰ཏོ

已于 2024-10-07 10:08:20 修改

阅读量1k

点赞数 16

文章标签：正则表达式前端 javascript

于 2024-10-07 09:50:54 首次发布

本文链接：https://blog.csdn.net/zzwokstyle/article/details/142735513

版权

正则表达式（Regular Expressions, regex）在前端开发中广泛用于表单验证、字符串操作、文本搜索和替换等场景。以下是一些常用的正则表达式语法和示例：

基本符号

.（点号）: 匹配任意单个字符，除了换行符。
示例: a.b 可以匹配 "aab", "acb", 但不能匹配 "ab"。
*（星号）: 匹配前面的字符 0 次或多次。
示例: a*b 可以匹配 "b", "ab", "aaab"。
+（加号）: 匹配前面的字符 1 次或多次。
示例: a+b 可以匹配 "ab", "aaab"，但不能匹配 "b"。
?（问号）: 匹配前面的字符 0 次或 1 次。
示例: a?b 可以匹配 "b", "ab"，但不能匹配 "aab"。
^（插入符）: 匹配字符串的开头。
示例: ^a 只能匹配以 "a" 开头的字符串，如 "apple"。
$（美元符号）: 匹配字符串的结尾。
示例: b$ 只能匹配以 "b" 结尾的字符串，如 "cab"。
[]（方括号）: 匹配方括号内的任意字符。
示例: [abc] 可以匹配 "a", "b", 或 "c"。
|（竖线）: 或运算符，匹配其左边或右边的表达式。
示例: a|b 可以匹配 "a" 或 "b"。
\（反斜杠）: 转义字符，用于匹配特殊字符。
示例: \. 可以匹配一个实际的点号 "."。

字符类

\d: 匹配任意数字（等价于 [0-9]）。
示例: \d\d 可以匹配两个数字，如 "23"。
\D: 匹配非数字字符。
示例: \D 可以匹配任何不是数字的字符。
\w: 匹配任意字母、数字或下划线字符（等价于 [a-zA-Z0-9_]）。
示例: \w+ 可以匹配单词字符，如 "hello" 或 "world_123"。
\W: 匹配非字母、数字或下划线的字符。
示例: \W 可以匹配特殊符号，如 "@" 或 "#"。
\s: 匹配空白字符（空格、制表符等）。
示例: \s+ 可以匹配一个或多个空格。
\S: 匹配非空白字符。
示例: \S+ 可以匹配连续的非空白字符。

限定符

{n}: 精确匹配前面的字符 n 次。
示例: a{3} 可以匹配 "aaa"。
{n,}: 匹配前面的字符至少 n 次。
示例: a{2,} 可以匹配 "aa", "aaa", "aaaa" 等。
{n,m}: 匹配前面的字符至少 n 次，至多 m 次。
示例: a{1,3} 可以匹配 "a", "aa", "aaa"。

示例：

1. 邮箱验证

const emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;

解释：检查邮箱格式是否有效，支持常见的邮箱域名格式。

2. 手机号验证（中国大陆）

const phoneRegex = /^1[3-9]\d{9}$/;

解释：匹配中国大陆手机号，1开头，后面跟随3-9的任意数字，且总长度为11位。

3. 用户名验证（4-16位字母、数字、下划线）

const usernameRegex = /^[a-zA-Z0-9_-]{4,16}$/;

解释：验证用户名长度为4到16位，可以包含字母、数字、下划线或中划线。

4. 密码强度验证（6-20位，必须包含字母和数字）

const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/;

解释：密码必须包含至少一个字母和一个数字，长度为6到20位。

5. 中文字符验证

const chineseRegex = /^[\u4e00-\u9fa5]+$/;

解释：匹配所有中文字符。

6. 身份证号验证（中国大陆18位）

const idCardRegex = /^[1-9]\d{5}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;

解释：匹配中国大陆18位身份证号码，包括末尾的校验位（X）。

7. IP地址验证（IPv4）

const ipv4Regex = /^(25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\.(25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\.(25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\.(25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})$/;

解释：匹配合法的IPv4地址，四组0-255之间的数字。

8. URL验证

const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/;

解释：匹配带有或不带有http、https的URL。

9. 日期验证（YYYY-MM-DD）

const dateRegex = /^(19|20)\d\d-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;

解释：匹配合法的日期格式，支持年份1900-2099，月份01-12，日期01-31。

10. 时间验证（HH:MM）

const timeRegex = /^([01]\d|2[0-3]):([0-5]\d):([0-5]\d)$/;

解释：匹配24小时制时间格式，小时范围为00-23，分钟和秒钟范围为00-59。

11. 邮政编码验证（中国大陆）

const postalCodeRegex = /^[1-9]\d{5}(?!\d)$/;

解释：匹配中国大陆6位邮政编码，首位为1-9。

12. 去除字符串前后空格

const trimRegex = /^\s+|\s+$/g;

解释：匹配字符串前后的空格，用于清除多余的空白字符。

13. 全字母验证（大小写字母）

const alphaRegex = /^[A-Za-z]+$/;

解释：验证是否只包含字母（大小写均可）。

14. 全数字验证

const numberRegex = /^\d+$/;

解释：验证是否只包含数字。

15. 浮点数验证（正数和负数）

const floatRegex = /^-?\d+(\.\d+)?$/;

解释：匹配正负浮点数和整数。

16. 非负整数验证

const nonNegativeIntegerRegex = /^\d+$/;

解释：匹配非负整数（包括零）。

17. 验证是否为HTML标签

const htmlTagRegex = /<("[^"]*"|'[^']*'|[^'">])*>/;

解释：匹配HTML标签，用于检测字符串是否包含HTML元素。

18. 匹配所有空白字符

const whiteSpaceRegex = /\s+/;

解释：匹配一个或多个空白字符，包括空格、制表符、换行符等。

19. 十六进制颜色代码验证

const hexColorRegex = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;

解释：匹配3位或6位的十六进制颜色代码，支持#符号的可选性。

20. 文件扩展名验证

const fileExtensionRegex = /\.(jpg|jpeg|png|gif|bmp)$/i;

解释：匹配常见的图片文件扩展名，忽略大小写。

相关文档和在线工具

1. MDN Web Docs - 正则表达式（Regular Expressions）

网址: MDN Regular Expressions
内容：
- MDN文档是Web开发者常用的参考资源，提供了详细的正则表达式概念、语法说明及示例。
- 重点介绍了JavaScript中如何使用正则表达式，包含常见的正则表达式方法，如test()和exec()，以及全局匹配、分组和引用等高级功能。