首先我们来思考以下两个个场景

  1. 我们使用window操作系统,有时候需要找一个文件,刚刚好这个文件我不知道放哪里去了,这个时候我们该怎么办呢?
  2. 我们使用word写论文的时候,不小心将“订价”中的“订”字写成了“定”,这时候我们该怎么办呢?

  对于第一种情况,我们就会用到系统的文件搜索功能,输入文件的名字,系统就会帮我们找到这个文件的位置。
  对于第二种情况,我们会用到软件提供的替换功能,首先查找错误的内容,然后将错误的内容替换成正确的内容。


类似的场景有很多。
可以发现,这两种情况有些相似,都是根据输入的关键词,查找到特定的内容,然后做进一步处理。

这就是正则表达式最常用的场景。


正则表达式通常是在计算机系统中,用以匹配特定的字符。匹配也可以理解为查找。

让我们来看看最简单的正则表达式:

var pat1 = /hi/;
var pat2 = /hello/;
var pat3 = /a/;
var pat4 = /d/;
var pat5 = /e/;
var pat6 = /[f]/;

上面几个就是最简单的正则表达式,可以看到,正则表达式是非常简单的

通过上面几个正则表达式可以看到,正则表达式是写在两个斜杠之间的。
记住,是斜杠:/,不是反斜杠:\
斜杠向左,反斜杠向右。

接下来我们来认识三个括号:
小括号:()
中括号:[]
大括号:{}
这三个括号是正则表达式的语法之魂。

小括号将正则表达式内容分组:可以将任何字符或者块进行分组,通常用在该块被其他条件限定的时候,比如长度限定,比如选择

//匹配:acd,bcd
var patter1 = /(a|b)cd/; //匹配:abcdefgh
var patter2 = /abcd(ef)gh/; //匹配:aefg,aefh,befg,befh,cefg,cefh,defg,defh
var patter3 = /[abcd](ef)[gh]/;
var patter3 = /[abcd]ef[gh]/;

中括号表示字符范围,无论中括号里面有多少内容,一个中括号只匹配一个字符或者一个子表达式(子表达式可以理解成一个字符)

//匹配:ac,bc,ad,bd
var patter1 = /[ab][cd]/; //匹配:a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z
var patter2 = /[a-z]/; //匹配:0,1,2,3,4,5,6,7,8,9
var patter3 = /[0-9]/; //匹配:h,e,l,o
var patter4 = /[helo]/; //匹配除了a,b,c之外的任何字符
var patter5 = /[^abc]/; //除了小写字母之外的其他任何字符
var patter6 = /[^a-z]/;

大括号用来控制字符长度。大括号用来表示1个字符或者1个子表达式的长度

// 匹配:a
var p1 = /a{1}/; // 匹配:abcabc
var p2 = /abc{2}/; // 匹配:abcabc或者2个以上的abc
var p3 = /abc{2,}/; // 两个或者2个以上6个以下的abc,包括6个
var p4 = /abc{2,6}/;

我们再来看一些正则表达式的例子:

// 匹配a或者b或者c
var p1 = /[abc]/; // 匹配abc
var p2 = /abc/; // 匹配a到z中的任意一个字母
var p3 = /[a-z]/; // 匹配阿拉伯数字中的任意一个
var p4 = /[0-9]/; // 匹配1或者2或者3或者4
var p5 = /[1234]/; // 匹配一个或者两个或者3个“hello”
var p6 = /hello{1,3}/; // 匹配ac,acac,ad,adad,bc,bcbc,bd,bdbd
var p7 = /([ab][cd]){1,2}/; // 匹配一个abd或者一个acd
var p8 = /(a[bc]d){1}/; // 匹配一个或者一个以上(2,3,4,5,6,7......)的abd、匹配一个或者一个以上(1,2,3,4,5,6......)的acd
var p9 = /(a[bc]d){1,}/; // 匹配
// adcd,aeae,afaf
// bdbd,bebe,bfbf
// cdcd,cece,cfcf
var p10 = /([abc][def]){2}/; // 匹配abab
var p11 = /([a][b]){2}/; // 匹配abab
var p12 = /(ab){2}/; // 匹配abb
var p13 = /ab{2}/; // 匹配abab,cdcd
var p14 = /[(ab)(cd)]{2}/;

通过以上我们的学习,我们看到,正则表达式的语法最核心的就是三个括号:()、[]、{}
小括号用来分组,分组成子表达式,一个小括号可以理解成一个字符
中括号是用来表示字符,匹配的内容是其中的一个
大括号只是用来确定字符或者子表达式(可以理解成一个字符)的长度,有三种情况:
  {n}  表示n长度
  {n,}  表示至少n长度,无上限
  {n,m}  表示n-m之间的长度

学习正则表达式,就是要掌握最基本的语法。

我们上面说的这些是正则表达式吗?好像和我以前看到的不一样呢。别急,我们再来看几个:
看看下面的这几个:

var pt1 = /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/;
var pt2 = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
var pt3 = /[A-Za-z0-9_\-\u4e00-\u9fa5]+/;
var pt4 = /[^\x00-\xff]/;
var pt5 = /[\u4e00-\u9fa5]/;

好像这五个才是真正的正则表达式吧。

没错,这些也是正则表达式,可是为什么和我们刚才学习到的不一样呢?
回过头来,我们刚才说正则表达式最核心的东西是三个括号:(),[],{}
看看上面这几个正则表达式,我们研究一下
  第一个里面出现了(),[]
  第二个里面出现了(),[],{}
  第三个里面有[]
  第四个里面有[]
不过,这几个表达式里面的其他看起来乱七八糟的东西都是什么呢?
比如下面几个:|,^,\,.,+,?
当然还有一些其他的,这里就不一一列举了。
我们再接着说大括号的事情。
  {0}  0
  {0,1}  0或者1
  {0,}  0个以上
  {1}  1个
  {1,}  至少1个
大括号是限定字符长度的,刚好,有人觉得老是写大括号,有点烦了,于是创造了下面几个等价字符
*,任意长度,0次或者多次,即1,2,3,4,5,6,7,8......
  等价于{0,}
+,一次或者多次(至少一次)
  等价于{1,}
?,零次或者一次
  等价于{0,1}

所以上面那几个表达式就可以进行替换了:上面五个表达式也可以写成下面这样。

var pt1 = /^((https|http|ftp|rtsp|mms){0,1}:\/\/)[^\s]{1,}/;
var pt2 = /\w[-\w.+]{0,}@([A-Za-z0-9][-A-Za-z0-9]{1,}\.){1,}[A-Za-z]{2,14}/;
var pt3 = /[A-Za-z0-9_\-\u4e00-\u9fa5]{1,}/;
var pt4 = /[^\x00-\xff]/;
var pt5 = /[\u4e00-\u9fa5]/;

所以当在表示字符长度的时候,完全可以用这三个字符(*、+、?)与中括号的表达方式进行互相替换。

正则中出现了这些符号,自然就会使正则看起来乱七八糟了。

上面还有没有可以进行替换的呢?当然有。

下面是一个表格,是正则表达式里面规定的可以进行互换的字符。

\b

匹配一个单词边界,也就是指单词和空格间的位置
\B 匹配非单词边界。
\cx 匹配由x指明的控制字符。
\d 匹配一个数字字符。等价于[0-9]。
\D 匹配一个非数字字符。等价于[^0-9]。
\f 匹配一个换页符。等价于\x0c和\cL。
\n 匹配一个换行符。等价于\x0a和\cJ。
\r 匹配一个回车符。等价于\x0d和\cM。
\s 匹配任何不可见字符,包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。
\S 匹配任何可见字符。等价于[^ \f\n\r\t\v]。
\t 匹配一个制表符。等价于\x09和\cI。
\v 匹配一个垂直制表符。等价于\x0b和\cK。
\w 匹配包括下划线的任何单词字符。类似但不等价于“[A-Za-z0-9_]”,这里的"单词"字符使用Unicode字符集。
\W 匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。

根据上面的表格,我们还可以 继续改写上面的五个正则表达式。将其中的一些字符进行替换。

亲爱的朋友,您不妨试试。

思考一个问题:如果我们要匹配小括号,中括号或者大括号本身呢?
这个时候反斜杠就起大作用了。
\
转义字符:“\”
转义字符的作用是将下一个字符标记为一个特殊字符:
  \\ 表示匹配 "\"
  \( 表示匹配 "("
  \) 表示匹配 ")"
  \n 表示一个换行符
  \[ 表示匹配 "["

比如:

// 匹配:hi[j]
var patter = /hi\[j\]/; // 匹配:\hello
var patter = /\\hello/;

转义字符基本上在每个编程语言中都会存在,和这里的作用一样,将转义字符后面的字符标记为特殊字符。

这里介绍的正则表达式是最简单的描述,而且这里基本上没有介绍关于正则表达式的概念。如果想要深入了解正则表达式,需要学习下面的一些名词:

RegExp,量词,元字符,反向引用,回溯,分组,子表达式,零宽断言,贪婪模式,懒惰模式,前后查找。

不过在日常工作中,学会了基本的语法后,就可以进行开发了。在工作过程中,通过实战,相信你会对正则表达式越来越熟悉。

上面是正则表达式的入门。

需要说明的是,正则表达式不是一门编程语言,目前几乎所有的编程语言都会有正则表达式这一模块,用来处理字符串相关的内容。比如说javascript中,有专门的RegExp对象来做正则相关的处理。其它语言,比如php,Java,Python等,都有相关的内容。

我是一名前端,所以接下来我来分享一下我在前端开发中,在javascript中使用正则表达式的一些体会。

javascript中一共有七个方法可以做正则方面的处理

RegExp对象有三个方法:

  compile()

  exec()

  test()

String对象有四个方法

  search()

  match()

  replace()

  split()

/ RegExp对象有三个方法:
//   compile()
//   exec()
//   test() // String对象有四个方法
//   search()
//   match()
//   replace()
//   split() // 创建字符串对象
var a_str = "hello world, She is a beautiful girl and he is a boy"; //创建正则表达式对象
var patter = /he/i; // 正则对象方法: // 返回一个数组,其中存放匹配的结果。此方法非常强大。这里只做一个简单的示例
patter.exec(a_str); // 判断字符串中是否有匹配结果,如果有的话,返回TRUE,如果没有返回FALSE
patter.test(a_str);//true // 字符串方法
//返回匹配到的第一个子串的起始位置,如果没有则返回-1
a_str.search(patter); // 返回一个或者多个匹配的值
a_str.match(patter); // 将字符串中的子串进行替换
a_str.replace(patter,"hello"); // 将字符串分割
a_str.split(patter);

上面还有一个没有提到的,javascript中的正则表达式修饰符。修饰符有三种,分别是全局(g),忽略大小写(i),多行匹配(m)

//忽略大小写
var patter1 = /hello/i; //多行匹配
var patter2 = /hello/m; //全局匹配
var patter3 = /hello/g;

正则表达式是开发中一个强有力的工具。学好正则表达式,走遍天下都不怕。

我是沛笠。欢迎各位程序猿和程序媛前来勾搭。

微信号;pelligit

QQ:2653807423

giithub:www.github.com/pelligit

晚安。

javascript正则表达式(RegExp)简述的更多相关文章

  1. JavaScript 正则表达式RegExp 和字符串本身的正则表达式

    JavaScript 正则表达式 正则表达式(英语:Regular Expression,在代码中常简写为regex.regexp或RE)使用单个字符串来描述.匹配一系列符合某个句法规则的字符串搜索模 ...

  2. javascript正则表达式 —— RegExp 对象

    定义 RegExp RegExp 对象用于存储检索模式. 通过 new 关键词来定义 RegExp 对象.以下代码定义了名为 patt1 的 RegExp 对象,其模式是 "e": ...

  3. JavaScript正则表达式-RegExp对象

    RegExp对象方法 exec():与String对象的match()方法功能相同. 参数为被搜索字符串.返回数组或null. test():与String对象的search()方法功能相同. 参数为 ...

  4. javascript类型系统——正则表达式RegExp类型

    × 目录 [1]对象 [2]实例属性 [3]静态属性[4]实例方法 前面的话 前面已经介绍过javascript中正则表达式的基础语法.javascript的RegExp类表示正则表达式,String ...

  5. JavaScript数据类型 正则表达式RegExp类型

    前言 上一篇文章已经介绍了正则表达式的基础语法.javascript的RegExp类表示正则表达式,String和RegExp都定义了方法,使用正则表达式可以进行强大的模式匹配和文本检索与替换.本文将 ...

  6. JavaScript -- 时光流逝(六):js中的正则表达式 -- RegExp 对象

    JavaScript -- 知识点回顾篇(六):js中的正则表达式 -- RegExp 对象 1. js正则表达式匹配字符之含义      查找以八进制数 规定的字符.     查找以十六进制数 规定 ...

  7. Javascript 正则表达式简述

    本文地址:http://www.cnblogs.com/blackmanba/p/regular-expressions-introduce.html 或者 http://forkme.info/re ...

  8. javascript正则表达式和字符串RegExp

    这篇文章主要介绍了javascript正则表达式和字符串RegExp and String(一)的相关资料,需要的朋友可以参考下     前言     正则表达式是javascript非常重要和常用的 ...

  9. JavaScript学习笔记-正则表达式(RegExp对象)

    正则表达式(RegExp对象)   1.正则表达式字面量,在脚本加载后编译.若你的正则表达式是常量,使用这种方式可以获得更好的性能,重复使用时不会重新编译: 2.使用构造函数创建的RegExp,提供了 ...

  10. JavaScript正则表达式,你真的知道?

    一.前言 粗浅的编写正则表达式,是造成性能瓶颈的主要原因.如下: var reg1 = /(A+A+)+B/; var reg2 = /AA+B/; 上述两个正则表达式,匹配效果是一样的,但是,效率就 ...

随机推荐

  1. EC笔记:第三部分:14、在资源管理类中小心Copying行为

    场景 上一节实现了智能指针,其中的拷贝构造函数和赋值运算符是通过增加/减少指针的引用计数来操作的.但是如果是管理一个独占资源呢?我们希望在一个资源使用时被锁定,在使用完毕后被释放. #include ...

  2. 偷天换日:网络劫持,网页js被伪装替换。

    偷天换日 3月12号石家庄一个客户(后面简称乙方)有几家门店,平台收银(web)有一些功能无法正常使用,平台有上千家门店在使用,到目前为止别的省份都没有此问题.远程协助发现,js日期控件无法正常调用, ...

  3. 运行第一个PHP程序

    由于PHP比较简单,所以闲来无事学习一下PHP的程序. 之前安装XAMPP出现各种错误,于是下载了PHPStudy,真的十分简单方便,感谢网站开发者. 可以在网站的软件下载中下载,附上首页链接:htt ...

  4. 如何在SpringBoot中使用JSP ?但强烈不推荐,果断改Themeleaf吧

    做WEB项目,一定都用过JSP这个大牌.Spring MVC里面也可以很方便的将JSP与一个View关联起来,使用还是非常方便的.当你从一个传统的Spring MVC项目转入一个Spring Boot ...

  5. Java下载文件(流的形式)

    @RequestMapping("download") @ResponseBody public void download(HttpServletResponse respons ...

  6. Bootstrap 之 Carousel

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  7. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  8. Microsoft Dynamics CRM 解决数据大于5000时,页面上只能导出5000+数据。

    页面显示: update [MSCRM_CONFIG].[dbo].[DeploymentProperties] set IntColumn=10000 --调整成10000+   页面导出: 一.在 ...

  9. 使用Kotlin对ViewGroup的视图进行函数使操作

    原文标题:Functional operations over Views in ViewGroup using Kotlin 原文链接:http://antonioleiva.com/functio ...

  10. RecyclerView如何消除底部的分割线

    最近遇到一个问题,用RecyclerView显示数据,纵向列表显示,添加默认分割线.   问题是:底部也会显示分割线,这很影响美观.   怎么解决这个问题呢?我想了很多办法,毫无头绪...   最后, ...