js之正则表达式基础
Posted 持&恒
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js之正则表达式基础相关的知识,希望对你有一定的参考价值。
字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在。比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@
前后的子串,再分别判断是否是单词和域名,但这样做不但麻烦,而且代码难以复用。
正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的。
所以我们判断一个字符串是否是合法的Email的方法是:
-
创建一个匹配Email的正则表达式;
-
用该正则表达式去匹配用户的输入来判断是否合法。
因为正则表达式也是用字符串表示的,所以,我们要首先了解如何用字符来描述字符。
在正则表达式中,如果直接给出字符,就是精确匹配。用d
可以匹配一个数字,w
可以匹配一个字母或数字,所以:
-
‘00d‘
可以匹配‘007‘
,但无法匹配‘00A‘
; -
‘ddd‘
可以匹配‘010‘
; -
‘ww‘
可以匹配‘js‘
;
.
可以匹配任意字符,所以:
‘js.‘
可以匹配‘jsp‘
、‘jss‘
、‘js!‘
等等。
要匹配变长的字符,在正则表达式中,用*
表示任意个字符(包括0个),用+
表示至少一个字符,用?
表示0个或1个字符,用{n}
表示n个字符,用{n,m}
表示n-m个字符:
来看一个复杂的例子:d{3}s+d{3,8}
。
我们来从左到右解读一下:
-
d{3}
表示匹配3个数字,例如‘010‘
; -
s
可以匹配一个空格(也包括Tab等空白符),所以s+
表示至少有一个空格,例如匹配‘ ‘
,‘ ‘
等; -
d{3,8}
表示3-8个数字,例如‘1234567‘
。
综合起来,上面的正则表达式可以匹配以任意个空格隔开的带区号的电话号码。
如果要匹配‘010-12345‘
这样的号码呢?由于‘-‘
是特殊字符,在正则表达式中,要用‘‘
转义,所以,上面的正则是d{3}-d{3,8}
。
但是,仍然无法匹配‘010 - 12345‘
,因为带有空格。所以我们需要更复杂的匹配方式。
进阶
要做更精确地匹配,可以用[]
表示范围,比如:
-
[0-9a-zA-Z\_]
可以匹配一个数字、字母或者下划线; -
[0-9a-zA-Z\_]+
可以匹配至少由一个数字、字母或者下划线组成的字符串,比如‘a100‘
,‘0_Z‘
,‘js2015‘
等等; -
[a-zA-Z\_$][0-9a-zA-Z\_$]*
可以匹配由字母或下划线、$开头,后接任意个由一个数字、字母或者下划线、$组成的字符串,也就是javascript允许的变量名; -
[a-zA-Z\_$][0-9a-zA-Z\_$]{0, 19}
更精确地限制了变量的长度是1-20个字符(前面1个字符+后面最多19个字符)。
A|B
可以匹配A或B,所以(J|j)ava(S|s)cript
可以匹配‘JavaScript‘
、‘Javascript‘
、‘javaScript‘
或者‘javascript‘
。
^
表示行的开头,^d
表示必须以数字开头。
$
表示行的结束,d$
表示必须以数字结束。
你可能注意到了,js
也可以匹配‘jsp‘
,但是加上^js$
就变成了整行匹配,就只能匹配‘js‘
了。
RegExp
有了准备知识,我们就可以在JavaScript中使用正则表达式了。
JavaScript有两种方式创建一个正则表达式:
第一种方式是直接通过/正则表达式/
写出来,第二种方式是通过new RegExp(‘正则表达式‘)
创建一个RegExp对象。
两种写法是一样的:
var re1 = /ABC-001/; var re2 = new RegExp(‘ABC\-001‘); re1; // /ABC-001/ re2; // /ABC-001/
注意,如果使用第二种写法,因为字符串的转义问题,字符串的两个\
实际上是一个。
先看看如何判断正则表达式是否匹配:
var re = /^d{3}-d{3,8}$/; re.test(‘010-12345‘); // true re.test(‘010-1234x‘); // false re.test(‘010 12345‘); // false
RegExp对象的test()
方法用于测试给定的字符串是否符合条件。
切分字符串
用正则表达式切分字符串比用固定的字符更灵活,请看正常的切分代码:
‘a b c‘.split(‘ ‘); // [‘a‘, ‘b‘, ‘‘, ‘‘, ‘c‘]
嗯,无法识别连续的空格,用正则表达式试试:
‘a b c‘.split(/s+/); // [‘a‘, ‘b‘, ‘c‘]
无论多少个空格都可以正常分割。加入,
试试:
‘a,b, c d‘.split(/[s,]+/); // [‘a‘, ‘b‘, ‘c‘, ‘d‘]
再加入;
试试:
‘a,b;; c d‘.split(/[s,;]+/); // [‘a‘, ‘b‘, ‘c‘, ‘d‘]
如果用户输入了一组标签,下次记得用正则表达式来把不规范的输入转化成正确的数组。
分组
除了简单地判断是否匹配之外,正则表达式还有提取子串的强大功能。用()
表示的就是要提取的分组(Group)。比如:
^(d{3})-(d{3,8})$
分别定义了两个组,可以直接从匹配的字符串中提取出区号和本地号码:
var re = /^(d{3})-(d{3,8})$/; re.exec(‘010-12345‘); // [‘010-12345‘, ‘010‘, ‘12345‘] re.exec(‘010 12345‘); // null
如果正则表达式中定义了组,就可以在RegExp
对象上用exec()
方法提取出子串来。
exec()
方法在匹配成功后,会返回一个Array
,第一个元素是正则表达式匹配到的整个字符串,后面的字符串表示匹配成功的子串。
exec()
方法在匹配失败时返回null
。
贪婪匹配
需要特别指出的是,正则匹配默认是贪婪匹配,也就是匹配尽可能多的字符。举例如下,匹配出数字后面的0
:
var re = /^(d+)(0*)$/; re.exec(‘102300‘); // [‘102300‘, ‘102300‘, ‘‘]
由于d+
采用贪婪匹配,直接把后面的0
全部匹配了,结果0*
只能匹配空字符串了。
必须让d+
采用非贪婪匹配(也就是尽可能少匹配),才能把后面的0
匹配出来,加个?
就可以让d+
采用非贪婪匹配:
var re = /^(d+?)(0*)$/; re.exec(‘102300‘); // [‘102300‘, ‘1023‘, ‘00‘]
全局搜索
JavaScript的正则表达式还有几个特殊的标志,最常用的是g
,表示全局匹配:
var r1 = /test/g; // 等价于: var r2 = new RegExp(‘test‘, ‘g‘);
全局匹配可以多次执行exec()
方法来搜索一个匹配的字符串。当我们指定g
标志后,每次运行exec()
,正则表达式本身会更新lastIndex
属性,表示上次匹配到的最后索引:
var s = ‘JavaScript, VBScript, JScript and ECMAScript‘; var re=/[a-zA-Z]+Script/g; // 使用全局匹配: re.exec(s); // [‘JavaScript‘] re.lastIndex; // 10 re.exec(s); // [‘VBScript‘] re.lastIndex; // 20 re.exec(s); // [‘JScript‘] re.lastIndex; // 29 re.exec(s); // [‘ECMAScript‘] re.lastIndex; // 44 re.exec(s); // null,直到结束仍没有匹配到
全局匹配类似搜索,因此不能使用/^...$/
,那样只会最多匹配一次。
正则表达式还可以指定i
标志,表示忽略大小写,m
标志,表示执行多行匹配。
小结
正则表达式非常强大,要在短短的一节里讲完是不可能的。要讲清楚正则的所有内容,可以写一本厚厚的书了。如果你经常遇到正则表达式的问题,你可能需要一本正则表达式的参考书。
以上是关于js之正则表达式基础的主要内容,如果未能解决你的问题,请参考以下文章