前端开发中常用的100个正则表达式

当涉及前端开发时，正则表达式是一个强大的工具，它能够帮助你处理字符串匹配、验证、替换等任务。作为开发者，你可能会发现以下这“前端开发中常用的100个正则表达式”极其有用。这个列表涵盖了广泛的应用场景，从Email验证和URL匹配到CSS属性提取和Markdown标记解析，以及更多。

这些精心挑选的正则表达式可以帮助你轻松处理输入验证、格式化文本、提取数据以及与用户的交互。无论你是初学者还是有经验的开发者，这个列表都能为你节省时间并提升工作效率。

收藏这个正则表达式集合，它将成为你前端工具箱中的一把利器，助你更快地解决开发问题，让你专注于构建出色的用户体验。无论你是构建网站、移动应用还是其他前端项目，这些正则表达式都将成为你不可或缺的帮手。

1. Email验证：

   /^[\w\.-]+@[a-zA-Z\d\.-]+\.[a-zA-Z]{2,}$/

2. URL验证：

   /^(https?:\/\/)?([a-zA-Z\d-]+\.)*[a-zA-Z\d-]+\.[a-zA-Z]{2,6}([\/\w \.-]*)*\/?$/

3. 用户名验证（只允许字母数字下划线，长度为4-16）：

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

4. 密码验证（包含至少一个数字和一个大写字母，长度为8-20）：

   /^(?=.*\d)(?=.*[A-Z]).{8,20}$/

5. 手机号验证（简化版，仅验证11位数字）：

   /^\d{11}$/

6. 日期格式验证（YYYY-MM-DD）：

   /^\d{4}-\d{2}-\d{2}$/

7. IP地址验证：

   /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

8. 身份证号验证（18位）：

   /^\d{17}[\dXx]$/

9. 金额验证（最多两位小数）：

   /^\d+(\.\d{1,2})?$/

10. HTML标签匹配：

    /<([a-z]+)\s*[^>]*>[\s\S]*<\/\1>/i

11. 去除空白字符：

    /\s/g

12. 提取数字：

    /\d+/g

13. 提取URL中的域名：

    /^(https?:\/\/)?([a-zA-Z\d-]+\.)*([a-zA-Z\d-]+\.[a-zA-Z]{2,6})/

14. 匹配电话号码（支持带区号和不带区号的格式）：

    /^(\d{3,4}-)?\d{7,8}$|^\d{11}$/

15. 匹配中文字符：

    /[\u4e00-\u9fa5]/

16. 提取HTML中的文本内容：

    /<[^>]*>/g

17. 匹配16进制颜色代码：

    /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/

18. 匹配HTML注释：

    /<!--[\s\S]*?-->/

19. 匹配整数：

    /^-?\d+$/

20. 匹配小数：

    /^-?\d+(\.\d+)?$/

21. 匹配手机号（中国）：

    /^1[3456789]\d{9}$/

22. 匹配邮政编码（中国）：

    /^[1-9]\d{5}$/

23. 匹配QQ号码：

    /^[1-9][0-9]{4,10}$/

24. 匹配正整数：

    /^[1-9]\d*$/

25. 匹配负整数：

    /^-[1-9]\d*$/

26. 匹配非负整数（正整数 + 0）：

    /^\d+$/

27. 匹配非正整数（负整数 + 0）：

    /^-[1-9]\d*|0$/

28. 匹配整数或小数：

    /^-?\d+(\.\d+)?$/

29. 匹配年份（1900-2099）：

    /^(19|20)\d{2}$/

30. 匹配月份（1-12）：

    /^(0?[1-9]|1[0-2])$/

31. 匹配日期（1-31）：

    /^((0?[1-9])|((1|2)[0-9])|30|31)$/

32. 匹配日期（YYYY-MM-DD）：

    /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])-0[2]-29))$/

33. 匹配时间（HH:MM）：

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

34. 匹配HTML标签内的属性值：

    /([a-zA-Z\-]+)(=)(["'])(.*?)(["'])/g

35. 匹配16进制数：

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

36. 匹配图片文件名：

    /^.+\.(jpg|jpeg|png|gif|bmp)$/

37. 匹配视频文件名：

    /^.+\.(mp4|avi|mov|flv|wmv)$/

38. 匹配音频文件名：

    /^.+\.(mp
    
    3|wav|ogg|aac)$/

39. 匹配压缩文件名：

    /^.+\.(zip|rar|7z|tar\.gz)$/

40. 匹配英文字母（大小写）：

    /^[a-zA-Z]+$/

41. 匹配大写英文字母：

    /^[A-Z]+$/

42. 匹配小写英文字母：

    /^[a-z]+$/

43. 匹配英文字母和数字：

    /^[a-zA-Z0-9]+$/

44. 匹配整数范围（1-100）：

    /^([1-9]|[1-9][0-9]|100)$/

45. 匹配中文、英文字母和数字：

    /^[\u4E00-\u9FA5A-Za-z0-9]+$/

46. 匹配16进制颜色值（含透明度）：

    /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/

47. 匹配CSS选择器：

    /^([a-zA-Z#][\w-]*|\.[\w-]+)(,[ \t]*([a-zA-Z#][\w-]*|\.[\w-]+))*[ \t]*$/

48. 匹配IPv6地址：

    /^(?:[A-F0-9]{1,4}:){7}[A-F0-9]{1,4}$/i

49. 匹配Markdown的标题（# 标题）：

    /^#{1,6}\s.+$/

50. 匹配Markdown的链接：

    /\[([^\]]+)\]\(([^)]+)\)/g

51. 匹配Markdown的图片：

    /\!\[([^\]]+)\]\(([^)]+)\)/g

52. 匹配Markdown的粗体文本（文本）：

    /\*\*(.*?)\*\*/g

53. 匹配Markdown的斜体文本（文本）：

    /\*(.*?)\*/g

54. 匹配Markdown的引用（> 引用内容）：

    /^>\s.+$/

55. 匹配Markdown的无序列表（- 列表项）：

    /^- .+$/

56. 匹配Markdown的有序列表（1. 列表项）：

    /^\d+\.\s.+$/

57. 匹配Markdown的代码块（代码）：

    /^```[ \t]*[a-zA-Z]*\s[\s\S]*?```$/

58. 匹配Markdown的表格行（| 列1 | 列2 |）：

    /^\|.*\|$/

59. 匹配Markdown的删除线（文本）：

    /~~(.*?)~~/g

60. 匹配Markdown的下划线（文本）：

    /<u>(.*?)<\/u>/g

61. 匹配Markdown的加粗斜体文本（文本）：

    /\*\*\*(.*?)\*\*\*/g

62. 匹配Markdown的标签（@标签）：

    /@[a-zA-Z0-9_]+/

63. 匹配Markdown的标题（Setext风格）：

    /^[^\n]+\n(=+|-+)$/g

64. 匹配CSS属性：

    /^[a-zA-Z-]+\s*:\s*[^;]+;$/g

65. 匹配CSS单位：

    /\d+(px|em|rem|vh|vw|%)$/g

66. 匹配CSS颜色值（#RRGGBB、#RRGGBBAA、rgb(R, G, B)）：

    /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$|^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/

67. 匹配CSS选择器中的类名（.class）：

    /\.[\w-]+/g

68. 匹配CSS选择器中的ID名（#id）：

    /\#[\w-]+/g

69. 匹配CSS选择器中的标签名（tag）：

    /^[a-zA-Z-]+$/

70. 匹配JSON属性名：

    /"[\w-]+":/g

71. 匹配XML标签：

    /<\/?[a-zA-Z][\w-]*(\s+[a-zA-Z][\w-]*="[^"]*")*\s*\/?>/g

72. 匹配Markdown的任务列表（- [ ] 任务）：

    /^- \[[x ]\] .+$/

73. 匹配Markdown的块引用（> 引用）：

    /^> .+$/

74. **匹配Markdown的代码块（```
    代码

    ```regex
    /^```[ \t]*[a-zA-Z]*\n[\s\S]*?\n```$/

75. 匹配Markdown的脚注（[^注释]：注释）：

    /^\[\^[^\]]+\]: .+$/

76. 匹配Markdown的链接引用（[文本][标识]）：

    /\[.+\]:\s.+$/

77. **匹配Markdown的水平分割线（— 或 *）：

    /^(---|\*\*\*)$/

78. 匹配Markdown的图片引用（![文本][标识]）：

    /!\[.+\]:\s.+$/

79. 匹配Markdown的HTML标签：

    /<\/?[a-zA-Z][\w-]*(\s+[a-zA
    
    -Z][\w-]*="[^"]*")*\s*\/?>/g

80. 匹配Markdown的HTML实体字符（&entity;）：

    /&[a-zA-Z\d]+;/

81. 匹配Markdown的特殊字符（*、_等）：

    /\\[\*\_\[\]\<\>\!\`\\\(\)]/g

82. 匹配Markdown的表格分隔符行（| — | — |）：

    /^\|(\s*-+\s*\|)+$/

83. 匹配Markdown的列表项（-、+、*）：

    /^[ \t]*([-+*])[ \t]+.+$/

84. 匹配HTML标签的属性：

    /[a-zA-Z-]+=["'][^"']["']/

85. 匹配HTML注释：

    /<!--[\s\S]*?-->/g

86. 匹配JS的单行注释：

    /\/\/.+$/

87. 匹配JS的多行注释：

    /\/\*[\s\S]*?\*\//

88. 匹配JS函数定义：

    /function\s+\w+\s*\([^)]*\)\s*\{[\s\S]*?\}/

89. 匹配JS的变量名：

    /\b\w+\b(?=[^\(\)]*\s*(?:\(|$))/g

90. 匹配JS的字符串：

    /["'`][\s\S]*?["'`]/g

91. 匹配JS的数字：

    /\b\d+(\.\d+)?\b/g

92. 匹配JS的关键字（if、for、while等）：

    /\b(if|else|for|while|function|return|break|continue)\b/g

93. 匹配JS的对象字面量属性名：

    /["']\w+["']\s*:/g

94. 匹配JS的类名：

    /\bclass\s+\w+\b/g

95. 匹配JS的箭头函数：

    /\([\w\s,]*\)\s*=>\s*[\s\S]*?}/g

96. 匹配JS的模板字符串：

    /`[\s\S]*?`/g

97. 匹配JS的async函数：

    /\basync\s+function\b/g

98. 匹配JS的import语句：

    /\bimport\s+.+\s+from\b/g

99. 匹配JS的export语句：

    /\bexport\s+.+\b/g

100. 匹配JS的Promise.then()语句：

     /\.\s*then\s*\(\s*function\s*\(/g

这些是前端开发中一些常用的正则表达式，涵盖了多个方面的需求。在使用这些正则表达式时，建议在实际情况下进行测试和调整，以确保符合你的需求。正则表达式可能会因为特殊情况而需要适当的调整。