Table of Contents
1 . 校验密码强度
2. 校验中文
3. 由数字、26个英文字母或下划线组成的字符串
4. 校验E-Mail 地址
5. 校验身份证号码
6. 校验日期
7. 校验金额
8. 校验手机号
9. 判断IE的版本
11. 校验IP-v6地址
12. 检查URL的前缀
13. 提取URL链接
14. 文件路径及扩展名校验
15. 提取Color Hex Codes
16. 提取网页图片
17. 提取页面超链接
18. 查找CSS属性
19. 抽取注释
20. 匹配HTML标签
正则表达式的相关语法
学习正则表达式
正则表达式在线测试工具
Home Web Front-end HTML Tutorial 20 regular expressions that will save you 1,000 lines of code

20 regular expressions that will save you 1,000 lines of code

Sep 12, 2016 pm 05:27 PM

正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。

正则表达式经常被用于字段或任意字符串的校验,如下面这段校验基本日期格式的JavaScript代码:

<span class="hljs-keyword">var reg = <span class="hljs-regexp">/^(\\d{1,4})(-|\\/)(\\d{<span class="hljs-number">1,<span class="hljs-number">2})\\<span class="hljs-number">2(\\d{<span class="hljs-number">1,<span class="hljs-number">2})$/; 
<span class="hljs-keyword">var r = fieldValue.match(reg);             
<span class="hljs-keyword">if(r==<span class="hljs-literal">null)alert(<span class="hljs-string">'Date format error!');</span></span></span></span></span></span></span></span></span></span></span>
Copy after login

下面是技匠整理的,在前端开发中经常使用到的20个正则表达式。

1 . 校验密码强度

密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。

^(?=.<span class="hljs-emphasis">*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$</span>
Copy after login

2. 校验中文

字符串仅能是中文。

^[\\u4e00-\\u9fa5]{0,}$
Copy after login

3. 由数字、26个英文字母或下划线组成的字符串

^\\w+$
Copy after login

4. 校验E-Mail 地址

同密码一样,下面是E-mail地址合规性的正则检查语句。

[<span class="hljs-string">\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[<span class="hljs-string">\\w!#$%&'*+/=?^_`{|}~-]+)<span class="hljs-emphasis">*@(?:[\\w](?:[\\w-]*[<span class="hljs-string">\\w])?\\.)+[<span class="hljs-string">\\w](<span class="hljs-link">?:[\\w-]*[\\w])?</span></span></span></span></span></span>
Copy after login

5. 校验身份证号码

下面是身份证号码的正则校验。15 或 18位。

15位:

^[<span class="hljs-number">1-<span class="hljs-number">9]\\d{<span class="hljs-number">7}((<span class="hljs-number">0\\d)<span class="hljs-params">|(1[0-2]))(([0|<span class="hljs-number">1<span class="hljs-params">|2]\\d)|<span class="hljs-number">3[<span class="hljs-number">0-<span class="hljs-number">1])\\d{<span class="hljs-number">3}$</span></span></span></span></span></span></span></span></span></span></span>
Copy after login

18位:

^[<span class="hljs-number">1-<span class="hljs-number">9]\\d{<span class="hljs-number">5}[<span class="hljs-number">1-<span class="hljs-number">9]\\d{<span class="hljs-number">3}((<span class="hljs-number">0\\d)<span class="hljs-params">|(1[0-2]))(([0|<span class="hljs-number">1<span class="hljs-params">|2]\\d)|<span class="hljs-number">3[<span class="hljs-number">0-<span class="hljs-number">1])\\d{<span class="hljs-number">3}([<span class="hljs-number">0-<span class="hljs-number">9]<span class="hljs-params">|X)$</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
Copy after login

6. 校验日期

“yyyy-mm-dd“ 格式的日期校验,已考虑平闰年。

^(?:(?!0000)[<span class="hljs-string">0-9]{4}-(?:(?:0[<span class="hljs-string">1-9]|1[<span class="hljs-string">0-2])-(?:0[<span class="hljs-string">1-9]|1[<span class="hljs-string">0-9]|2[<span class="hljs-string">0-8])|(?:0[<span class="hljs-string">13-9]|1[<span class="hljs-string">0-2])-(?:29|30)|(?:0[<span class="hljs-string">13578]|1[<span class="hljs-string">02])-31)|(?:[<span class="hljs-string">0-9]{2}(?:0[<span class="hljs-string">48]|[<span class="hljs-string">2468][<span class="hljs-symbol">048]|[<span class="hljs-string">13579][<span class="hljs-symbol">26])|(?:0[<span class="hljs-string">48]|[<span class="hljs-string">2468][<span class="hljs-symbol">048]|[<span class="hljs-string">13579][<span class="hljs-symbol">26])00)-02-29)$</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
Copy after login

7. 校验金额

金额校验,精确到2位小数。

^[0-9]+(.[0-9]{2})?$
Copy after login

8. 校验手机号

下面是国内 13、15、18开头的手机号正则表达式。(可根据目前国内收集号扩展前两位开头号码)

^(<span class="hljs-number">13[<span class="hljs-number">0-<span class="hljs-number">9]<span class="hljs-params">|14[5|<span class="hljs-number">7]<span class="hljs-params">|15[0|<span class="hljs-number">1<span class="hljs-params">|2|<span class="hljs-number">3<span class="hljs-params">|5|<span class="hljs-number">6<span class="hljs-params">|7|<span class="hljs-number">8<span class="hljs-params">|9]|<span class="hljs-number">18[<span class="hljs-number">0<span class="hljs-params">|1|<span class="hljs-number">2<span class="hljs-params">|3|<span class="hljs-number">5<span class="hljs-params">|6|<span class="hljs-number">7<span class="hljs-params">|8|<span class="hljs-number">9])\\d{<span class="hljs-number">8}$</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
Copy after login

9. 判断IE的版本

IE目前还没被完全取代,很多页面还是需要做版本兼容,下面是IE版本检查的表达式。

^.<span class="hljs-emphasis">*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\/[5-9]\\.0).*$</span>
Copy after login

10. 校验IP-v4地址

IP4 正则语句。

\\b(?:(?:25[<span class="hljs-string">0-5]|2[<span class="hljs-string">0-4][<span class="hljs-symbol">0-9]|[<span class="hljs-string">01]?[<span class="hljs-string">0-9][<span class="hljs-symbol">0-9]?)\\.){3}(?:25[<span class="hljs-string">0-5]|2[<span class="hljs-string">0-4][<span class="hljs-symbol">0-9]|[<span class="hljs-string">01]?[<span class="hljs-string">0-9][<span class="hljs-symbol">0-9]?)\\b</span></span></span></span></span></span></span></span></span></span></span></span>
Copy after login

11. 校验IP-v6地址

IP6 正则语句。

(([0-9a<span class="hljs-_">-fA-F]{1,4}:){7,7}[0-9a<span class="hljs-_">-fA-F]{1,4}|([0-9a<span class="hljs-_">-fA-F]{1,4}:){1,7}:|([0-9a<span class="hljs-_">-fA-F]{1,4}:){1,6}:[0-9a<span class="hljs-_">-fA-F]{1,4}|([0-9a<span class="hljs-_">-fA-F]{1,4}:){1,5}(:[0-9a<span class="hljs-_">-fA-F]{1,4}){1,2}|([0-9a<span class="hljs-_">-fA-F]{1,4}:){1,4}(:[0-9a<span class="hljs-_">-fA-F]{1,4}){1,3}|([0-9a<span class="hljs-_">-fA-F]{1,4}:){1,3}(:[0-9a<span class="hljs-_">-fA-F]{1,4}){1,4}|([0-9a<span class="hljs-_">-fA-F]{1,4}:){1,2}(:[0-9a<span class="hljs-_">-fA-F]{1,4}){1,5}|[0-9a<span class="hljs-_">-fA-F]{1,4}:((:[0-9a<span class="hljs-_">-fA-F]{1,4}){1,6})|:((:[0-9a<span class="hljs-_">-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a<span class="hljs-_">-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a<span class="hljs-_">-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
Copy after login

12. 检查URL的前缀

应用开发中很多时候需要区分请求是HTTPS还是HTTP,通过下面的表达式可以取出一个url的前缀然后再逻辑判断。

<span class="hljs-keyword">if (!s.match(<span class="hljs-regexp">/^[a-zA-Z]+:\\/\\<span class="hljs-comment">//))
{
    s = <span class="hljs-string">'http://' + s;
}</span></span></span></span>
Copy after login

13. 提取URL链接

下面的这个表达式可以筛选出一段文本中的URL。

^(f|ht){<span class="hljs-number">1}(tp|tps):\\<span class="hljs-regexp">/\\/([\\w-]+\\.)+[\\w-]+(\\/[\\w- ./?%&=]*)?</span></span>
Copy after login

14. 文件路径及扩展名校验

验证windows下文件路径和扩展名(下面的例子中为.txt文件)

^([a-zA-Z]\\<span class="hljs-symbol">:|\\\\)\\\\([^\\\\]+\\\\)*[^\\/<span class="hljs-symbol">:*?<span class="hljs-string">"<>|]+\\.txt(l)?$</span></span></span>
Copy after login

15. 提取Color Hex Codes

有时需要抽取网页中的颜色代码,可以使用下面的表达式。

^<span class="hljs-comment">#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$</span>
Copy after login

16. 提取网页图片

假若你想提取网页中所有图片信息,可以利用下面的表达式。

\\<span class="xml"><span class="hljs-tag">< *[<span class="hljs-attr">img][^\\\\>]<span class="hljs-emphasis">*[src] *= <span class="hljs-emphasis">*[\\"\\']{0,1}([^\\"\\'\\ >]*)</span></span></span></span></span>
Copy after login

17. 提取页面超链接

提取html中的超链接。

(<a\\<span class="hljs-keyword">s*(?!.*\\brel=)[^>]*)(href=<span class="hljs-string">"https?:\\/\\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)<span class="hljs-string">"((?!.*\\brel=)[^>]*)(?:[^>]*)></span></span></span>
Copy after login

18. 查找CSS属性

通过下面的表达式,可以搜索到相匹配的CSS属性。

^\\s*[a-zA-Z\\-]+\\s*[:]{<span class="hljs-number">1}\\s[a-zA-Z0<span class="hljs-number">-9\\s.<span class="hljs-comment">#]+[;]{1}</span></span></span>
Copy after login

19. 抽取注释

如果你需要移除HMTL中的注释,可以使用如下的表达式。

<span class="hljs-comment"><!--(.*?)--></span>
Copy after login

20. 匹配HTML标签

通过下面的表达式可以匹配出HTML中的标签属性。

<\\/?\\w+((\\s+\\w+(\\s*=\\s*(?<span class="hljs-symbol">:<span class="hljs-string">".*?"|<span class="hljs-string">'.*?'|[\\^<span class="hljs-string">'">\\s]+))?)+\\s*|\\s*)\\/?></span></span></span></span>
Copy after login

正则表达式的相关语法

下面是我找到的一张非常不错的正则表达式 Cheat Sheet,可以用来快速查找相关语法。

学习正则表达式

我在网上看到了一篇相当不错的正则表达式快速学习指南,有兴趣继续深入学习的同学可以参考。

正则表达式在线测试工具

regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式哦。

 
 
阅读正文请点击此处
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS, and JavaScript: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

See all articles