通过实例学习正则表达式

NervosNetwork 发布于2019-08-26 10:59 / 1127人阅读

摘要：在正则表达式中被称为元字符，它可以匹配除回车换行行分隔符和段分隔符以外的所有字符。点击查看其他元字符。想要实际查看两种模式的区别，可以将上方匹配的正则表达式的去掉再执行，看看返回结果有何不同。

判断邮箱是否正确 邮箱正则

/w+[w.]*@[w.]+.w+/

测试用例

const regex = /w+[w.]*@[w.]+.w+/

regex.test("666@email.com")            // true
regex.test("july@e.c")                 // true               
regex.test("_@email.com.cn")           // true
regex.test("july_1234@email.com")      // true

regex.test("@email.com")               // false
regex.test("julyemail.com")            // false
regex.test("july.email.com")           // false
regex.test("july@")                    // false
regex.test("july@email")               // false
regex.test("july@email.")              // false
regex.test("july@.")                   // false
regex.test("july@.com")                // false
regex.test("-~!#$%@email.com")         // false

正则讲解

w。 w属于一种预定义模式，表示匹配任意的字母、数字和下划线。点击查看其他预定义模式。

+、*。 +、*和？在正则表达式中被称为量词符。+表示一次或多次，*表示0次或多次，？表示0次或一次。

. 。 . 在正则表达式中被称为元字符，它可以匹配除回车（）、换行( ) 、行分隔符（u2028）和段分隔符（u2029）以外的所有字符。因为元字符有特殊含义，所以如果要匹配元字符本身，就需要使用转义字符，也就是在前面加上反斜杠 ( )。点击查看其他元字符

[w.]。 [ ] 表示一个字符集合，比如 [ july ] 不是表示匹配整个单词，而是表示j、u、l和y组成的一个字符集合，匹配时只要匹配到其中一个字母就表示匹配成功。点击查看字符集合详解

总览

匹配URL地址 URL正则

/https?://(w*:w*@)?[-w.]+(:d+)?(/([w/.]*(?S+)?)?)?/

测试用例

const regex = /https?://(w*:w*@)?[-w.]+(:d+)?(/([w/.]*(?S+)?)?)?/

regex.test("http://www.forta.com/blog")                    // true
regex.test("https://www.forta.com:80/blog/index.cfm")      // true
regex.test("https://www.forta.com")                        // true
regex.test("http://ben:password@www.forta.com/")           // true
regex.test("http://localhost/index.php?ab=1&c=2")          // true
regex.test("http://localhost:8500/")                       // true

正则讲解

( ) 。类似于( w:w*@ )这样的表达式被称为子表达式，相比于字符集合[ ]匹配时只匹配集合中的一个字符，子表达式是将括号内的表达式作为一个整体来匹配。比如 ( :d+ )匹配类似于 “:8080” 这样的字符串，而 [ :d ] 匹配一个 : 或者一个数字。

总览

练习 去掉html文件中的所有注释 html文件

我在本地随便写了一个html文件，包含css、html和js3个部分，是一个完整的网页。





  
  
  
  Document
  



  h1 title
 

  h2 title

匹配

const htmlStr = `html字符串`;   // 将上面的html内容拷贝于此，由于太长，就不再拷贝

// 匹配 /* */
htmlStr.match(//*[^]*?*//g);  // 该行代码会返回一个数组，长度为10，数组的每个元素分别对应匹配到的 /* */，由于篇幅有限，就不将结果展示到这里了

// 匹配 
htmlStr.match(//g);

// 匹配 //
htmlStr.match(/(//.*?(?=([""]s*w+s*=)|([""]s*>)))|(//.*)/g);

分析

g全局修饰符。g是正则表达式的修饰符，表示全局匹配或者搜索，因为html中会有多个注释，所以需要全局修饰符（点击查看全部修饰符）。

[^]。^被称为脱字符，我的理解就是取反的意思，比如[ ^abc ]表示除了a、b和c，其他所有字符都可以匹配。[^]匹配任意字符，包括换行符。

非贪婪模式。量词符在默认情况下都是使用贪婪模式进行匹配，比如说上面的[^]*表示匹配0个或多个任意字符，由于是贪婪模式，所以会尽可能多的匹配任意字符，直到不满足条件为止。通过在[^]*后面加一个？号，就变成了非贪婪模式，这种模式下，一旦条件满足，就不会再往下匹配。想要实际查看两种模式的区别，可以将上方匹配 /* */的正则表达式的？去掉再执行，看看返回结果有何不同。

向前查找。向前查找就是一个以？=开头的子表达式。举例说明其意义，比如我们要匹配出URL的协议部分，URL：https://www.forta.com，正则：/.+(?=:)/，(?=:)就是一个向前查找，它表示只要匹配到:，就把：之前的内容返回，:本身不需要返回。

前面两种注释的匹配比较容易，第三种也就是//这种注释比较复杂。其实对于//注释，在绝大多数情况下///.*/这个正则可以匹配出，但是有两种情况不能满足，见下方代码

我们通过图片详细解析一下

最终代码

为了方便，最终代码选择在node环境中执行，因为最初的需求是将html中的所有注释去掉，所以我们使用了字符串的replace方法，该方法接收两个参数，第一个参数是正则表达式，第二个参数是需要替换成的内容。

const fs = require("fs");

// regex.html 是放在同级目录下的html源文件
fs.readFile("./regex.html", "utf8", (err, data) => {
  if (err) throw err;

  console.log(
    data
      .replace(//*[^]*?*//g, "")    // 替换 /* */
      .replace(//g, "")     // 替换 
      .replace(/(//.*?(?=([""]s*w+s*=)|([""]s*>)))|(//.*)/g, "")  // 替换 // 
  );
});

参考资料

《正则表达式必知必会》
阮一峰javascript教程

私有云服务器托管正则表达式实例正则正则表达式正则匹配正则表达式 -正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106942.html

60分钟正则从入门到深入

摘要：正则表达式使用单个字符串来描述匹配一系列匹配某个句法规则的字符串。接下来，是在手机正则里面已经出现了。序列匹配而则匹配。分组与反向引用分组，又称为子表达式。把正则表达式拆分成小表达式。本文转载自网络。转载编辑过程中，可能有遗漏或错误，请以原文为准。原文作者：水墨寒湘原文链接：https://juejin.im/post/582dfc... 正则表达式对于我来说一直像黑暗魔法一样的存...

_ang 2019-08-26 11:34 评论0 收藏0
正则系列——JavaScript正则表达式基础语法巩固篇

摘要：基础语法巩固正则表达式引擎根据正则去匹配字符的时候，是通过检查索引的方式。妻原配就是好，可以直接使用正则表达式调用它。下面解释一下上面这些常用的元字符查找单个字符，除了换行和行结束符。正则系列文章整理到了上一章内容：正则表达式实战篇知识回顾前2章分别学习了正则表达式入门技巧，以及遇到正则需求该如何去分析问题，还有正则表达式实战的一些场景解释。这一章内容偏向理论，推荐你点击开头的...

phodal 2019-08-22 11:09 评论0 收藏0
正则表达式

摘要：最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写，作用是对字符串执行模式匹配。学习目标了解正则表达式语法在中使用正则表达式在中使 JS高级技巧本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验，进行扩展延伸，同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测...

yibinnn 2019-08-21 17:57 评论0 收藏0
简单学习 JavaScript 正则表达式

摘要：对于对象，方法返回一个该正则表达式的字面量。显示显示正则表达式在的应用一个在字符串中执行查找匹配的方法，它返回一个数组或者在未匹配到时返回。为什么要用正则表达式简单的说：我们与字符串接触的频率非常之高，正则表达式可以极大的提高复杂文本分析的效率，快速匹配出复杂的字符串。创建一个正则表达式直接量语法（字面量） var expression = /pattern/flags ;...

nevermind 2019-08-20 12:03 评论0 收藏0