JavaScript 正则表达式——基本语法--图形化表示易懂

JavaScript 正则表达式——基本语法

定义

JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串

1. 构造函数

var reg=new RegExp(‘<%[^%>]+%>‘,‘g‘);

2. 字面量

var reg=/<%[^%>]%>/g;
  • g: global,全文搜索,默认搜索到第一个结果接停止
  • i: ingore case,忽略大小写,默认大小写敏感
  • m: multiple lines,多行搜索(更改^ 和$的含义,使它们分别在任意一行对待行首和行尾匹配,而不仅仅在整个字符串的开头和结尾匹配)

元字符

正则表达式让人望而却步以一个重要原因就是其转义字符太多了,组合非常之多,但是正则表达式的元字符(在正则表达式中具有特殊意义的专用字符,可以用来规定其前导字符)并不多

元字符:( [ { \ ^ $ | ) ? * + .

并不是每个元字符都有其特定意义,在不同的组合中元字符有不同的意义,分类看一下

预定义特殊字符

字符 含义
\t 水平制表符
\r 回车符
\n 换行符
\f 换页符
\cX 与X对应的控制字符(Ctrl+X)
\v 垂直制表符
\0 空字符

字符类

一般情况下正则表达式一个字符(转义字符算一个)对应字符串一个字符,表达式 ab\t 的含义是

但是我们可以使用元字符[]来构建一个简单的类,所谓类是指,符合某些特征的对象,是一个泛指,而不是特指某个字符了,我们可以使用表达式 [abc] 把字符a或b或c归为一类,表达式可以匹配这类的字符

元字符[]组合可以创建一个类,我们还可以使用元字符^创建反向类/负向类,反向类的意思是不属于XXX类的内容,表达式 [^abc] 表示不是字符a或b或c的内容

范围类

按照上面的说明要是我们希望匹配单个数字那么表达式是这样的

[0123456789]

如果是字母那么。。。,好麻烦,正则表达式还提供了范围类,我们可以使用 x-y来连接两个字符表示从x到y的任意字符,这是个闭区间,也就是说包含x和ybenshen,这样匹配小写字母就很简单了

[a-z]

要是想匹配所有字母呢?在[]组成的类内部是可以连写的,我们还可以这样写 [a-zA-Z]

预定义类

刚才使用正则我们创建了几个类,来表示数字,字母等,但这样写也很是麻烦,正则表达式为我们提供了几个常用的预定义类来匹配常见的字符

字符 等价类 含义
. [^\n\r] 除了回车符和换行符之外的所有字符
\d [0-9] 数字字符
\D [^0-9] 非数字字符
\s [ \t\n\x0B\f\r] 空白符
\S [^ \t\n\x0B\f\r] 非空白符
\w [a-zA-Z_0-9] 单词字符(字母、数字、下划线)
\W [^a-zA-Z_0-9] 非单词字符

有了这些预定义类,写一些正则就很方便了,比如我们希望匹配一个 ab+数字+任意字符 的字符串,就可以这样写了 ab\d.

边界

正则表达式还提供了几个常用的边界匹配字符


字符


含义


^


以xx开头


$


以xx结尾


\b


单词边界,指[a-zA-Z_0-9]之外的字符


\B


非单词边界

看个不负责任的邮箱正则匹配(切勿模仿,小括号后面会讲到) \[email protected]\w+\.(com)$

量词

之前我们介绍的方法都是一一匹配的,如果我们希望匹配一个连续出现20次数字的字符串难道我们需要写成这样

\d\d\d\d...

为此正则表达式引入了一些量词

字符 含义
? 出现零次或一次(最多出现一次)
+ 出现一次或多次(至少出现一次)
* 出现零次或多次(任意次)
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
   

看几个使用量词的例子

\w+\b Byron 匹配 单词+边界+Byron

(/\w+\b Byron/).test(‘Hi Byron‘); //true

(/\w+\b Byron/).test(‘Welcome Byron‘); //true

(/\w+\b Byron/).test(‘HiByron‘); //false

\d+\.\d{1,3} 匹配三位小数的数字

贪婪模式与非贪婪模式

看了上面介绍的量词,也许爱思考的同学会想到关于匹配原则的一些问题,比如{3,5}这个量词,要是在句子种出现了十次,那么他是每次匹配三个还是五个,反正3、4、5都满足3~5的条件,量词在默认下是尽可能多的匹配的,也就是大家常说的贪婪模式

‘123456789‘.match(/\d{3,5}/g); //["12345", "6789"] 

既然有贪婪模式,那么肯定会有非贪婪模式,让正则表达式尽可能少的匹配,也就是说一旦成功匹配不不再继续尝试,做法很简单,在量词后加上 ? 即可

‘123456789‘.match(/\d{3,5}?/g); //["123", "456", "789"]

分组

有时候我们希望使用量词的时候匹配多个字符,而不是像上面例子只是匹配一个,比如希望匹配Byron出现20次的字符串,我们如果写成 Byron{20} 的话匹配的是Byro+n出现20次,怎么把Byron作为一个整体呢?使用()就可以达到次目的,我们称为分组

(Byron){20}

如果希望匹配Byron或Casper出现20次该怎么办呢?可以使用字符 | 达到或的功效

(Byron|Casper){20}

我们看到图中有个#1的东东,那是什么?使用分组的正则表达式会把匹配项也放到分组中,默认就是按数字编号分发的,各异根据编号获得捕获的分组内容,这个在一些希望具体操作第几个匹配项的函数中很有用

(Byron).(ok)

如果有分组嵌套的情况,外面的组的编号靠前

((^|%>)[^\t]*)

有时候我们不希望捕获某些分组,只需要在分组内加上 ?: 就可以了,着并不意味着该分组内容不属于正则表达式,只是不会给这个分组加编号了而已

(?:Byron).(ok)

其实在C#等语言中分组还可以起名字,不过JavaScript不支持

前瞻

表达式 含义
exp1(?=exp2) 匹配后面是exp2的exp1
exp1(?!exp2) 匹配后面不是exp2的exp1

说的有些抽象,看个例子 good(?=Byron)

(/good(?=Byron)/).exec(‘goodByron123‘); //[‘good‘]
(/good(?=Byron)/).exec(‘goodCasper123‘); //null
(/bad(?=Byron)/).exec(‘goodCasper123‘);//null

通过上面例子可以看出 exp1(?=exp2) 表达式会匹配exp1表达式,但只有其后面内容是exp2的时候才会匹配,也就是两个条件,exp1(?!exp2) 比较类似

good(?!Byron)

(/good(?!Byron)/).exec(‘goodByron123‘); //null
(/good(?!Byron)/).exec(‘goodCasper123‘); //[‘good‘]
(/bad(?!Byron)/).exec(‘goodCasper123‘);//null

参考

司徒正美 JavaScript正则表达式

Regexper

PS:博客中的图都是用第二个链接做的,帮助人图形化理解正则表达式,真心不错

时间: 2024-08-08 14:01:53

JavaScript 正则表达式——基本语法--图形化表示易懂的相关文章

javascript正则表达式定义(语法)

javascript正则表达式定义(语法) 正则表达式的2种定义方法:一种是直接调用RegExp(),第二种是直接用字面量来定义,即var re = /正则规则/; 2种定义方法本质都是调用RegExp()方法 在调用同一段正则代码的时候,ECMAScript3和ECMAScript5中表现完全不一样 ? function reg(){ var re = /\sjavascript/; return re; } 分别在ECMAScript3和ECMAScript5中调用reg()方法多次 在EC

js正则表达式图形化工具-rline

github地址:https://github.com/finance-sh/rline 在线demo: http://lihuazhai.com/demo/test.html 这是一个js正则表达式图形化工具,有以下功能: 在输入框填入正则表达式,支持格式:1,没有斜线,如:\d|\s ; 2,有斜线,如:/\d|\s/ 点击展示按钮,将会在下方生成正则流程图:同时在控制台中将会输出该正则的数据结构. 实例: 请在高级浏览器中运行. 我们的github地址:https://github.com

JavaScript代码-正则表达式基本语法入门

什么是正则表达式 由字母.数字.特殊符号构成的描述字符模式的表达式. 功能: 1.模式匹配 2.文本检索 3.替换功能. 定义法方法,有两种,分别为: 直接量定义法 var reg  = /表达式/修饰符 包含在一对/斜杠之间的字符.表达式不需要加引号,直接书写, 如var reg = /abcd/g 构造函数定义法 var reg = new RegExp( 表达式 , 修饰符  ); 直接量定义法和构造函数定义法的区别在于:构造函数方法可以对表达式进行动态创建,如var reg = new

JavaScript正则表达式语法及使用范例大全

JavaScript正则表达式 1.      使用JS正则表达式,首先要了解JS正则表达式的常用符号,如下图: /-/ 代表一个模式的开始和结束 ^ 匹配字符串的开始 $ 匹配字符串的结束 \s 匹配一个空白字符 \S 匹配一个非空白字符 \d 匹配一个数字字符,等价于[0-9] \D 匹配一个非数字字符,等价于[^0-9] \w 匹配一个数字.字母.或下划线,等价于[A-Za-z0-9_] . 匹配一个除了换行符之外的字符 \ 转义字符,对于上述这些特殊的符号,如果要匹配,则需要加\进行转义

JavaScript 正则表达式上——基本语法

定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%>','g'); 2. 字面量 var reg=/<%[^%>]%>/g; g: global,全文搜索,默认搜索到第一个结果接停止 i: ingore case,忽略大小写,默认大小写敏感 m: multiple lines,多行搜索 元字符 正则表达式让人望而却步以一个重要原因就是其转

前端学PHP之正则表达式基础语法

前面的话 正则表达式是用于描述字符排列和匹配模式的一种语法规则.它主要用于字符串的模式分割.匹配.查找及替换操作.在PHP中,正则表达式一般是由正规字符和一些特殊字符(类似于通配符)联合构成的一个文本模式的程序性描述.正则表达式有三个作用:1.匹配,也常常用于从字符串中析取信息:2.用新文本代替匹配文本:3.将一个字符串拆分为一组更小的信息块.本文将详细介绍PHP中的正则表达式基础语法 [注意]关于javascript的正则表达式的详细信息移步至此 历史 在PHP中有两套正则表达式函数库,两者功

【Mysql】Mysql的安装、部署与图形化

Mysql是一个必须学会如何安装与部署的工具,它不同于其它那些傻瓜式的应用/程序,一键到底,如果是初次在Windows下安装Mysql的初学者还是有一定难度的. 本文配合之前的<[Javaweb]前台开发环境的配置Myeclipse6.5+JDK1.6+Tomcat6.0+SVN1.8>(点击打开链接)一文中的前台开发环境的部署,也就形成了JavaWeb.JSP.J2EE的基本开发环境. 一.Mysql的下载 首先打开Mysql的官网(点击打开链接),百度一下是搜不到的,我也找了很久才找到My

javascript正则表达式(RegExp)简述

首先我们来思考以下两个个场景 我们使用window操作系统,有时候需要找一个文件,刚刚好这个文件我不知道放哪里去了,这个时候我们该怎么办呢? 我们使用word写论文的时候,不小心将"订价"中的"订"字写成了"定",这时候我们该怎么办呢? 对于第一种情况,我们就会用到系统的文件搜索功能,输入文件的名字,系统就会帮我们找到这个文件的位置. 对于第二种情况,我们会用到软件提供的替换功能,首先查找错误的内容,然后将错误的内容替换成正确的内容. 类似的场景

PySide——Python图形化界面入门教程(一)

PySide——Python图形化界面入门教程(一) ——基本部件和HelloWorld 原文链接:http://pythoncentral.io/intro-to-pysidepyqt-basic-widgets-and-hello-world/ 本教程第一部分将给出PySide的最基本知识点,包含使用的对象,和一些能帮助你了解Python/Qt应用是如何构建的小例子. 首先来看一下基本的Qt对象.Qt包含了许多类去处理XML.多媒体.数据库和网络等等事物,但我们现在重点关注可视化的元素——窗