웹 프론트엔드 JS 튜토리얼 JavaScript의 RegExp 객체 구문 분석

JavaScript의 RegExp 객체 구문 분석

Feb 09, 2018 pm 01:39 PM
javascript js regexp

정규식(정규식)은 텍스트 패턴(예: 문자열 구조)을 표현하는 방법으로, 문자열의 템플릿과 비슷하며 "주어진 패턴"에 따라 텍스트를 일치시키는 도구로 자주 사용됩니다. 예를 들어, 정규식은 이메일 주소의 패턴을 제공한 다음 이를 사용하여 문자열이 이메일 주소인지 여부를 결정합니다. 이 기사에서는 주로 JavaScript의 RegExp 개체 분석을 공유합니다.

JavaScript의 정규 표현식 시스템은 Perl 5를 참조하여 구축되었습니다.

새 정규식을 만드는 방법에는 두 가지가 있습니다. 하나는 슬래시로 시작하고 끝나는 리터럴을 사용하는 것입니다.

var regex = /xyz/;
로그인 후 복사

다른 하나는 RegExp 생성자를 사용하는 것입니다.

var regex = new RegExp('xyz');
로그인 후 복사

위의 두 가지 작성 방법은 모두 xyz 콘텐츠로 새로운 정규식 개체를 만듭니다. 이들 사이의 주요 차이점은 첫 번째 방법은 컴파일 타임에 새로운 정규식을 생성하고 두 번째 방법은 런타임에 새로운 정규식을 생성한다는 것입니다.

RegExp 생성자는 수정자를 나타내는 두 번째 매개변수도 허용할 수 있습니다(자세한 설명은 아래 참조).

var regex = new RegExp('xyz', "i");
// 等价于
var regex = /xyz/i;
로그인 후 복사

위 코드에서 정규식 /xyz/에는 수정자 i가 있습니다.

런타임에 리터럴과 생성자라는 두 가지 작성 방법 사이에는 미묘한 차이가 있습니다. 리터럴 작성 방법을 사용하면 코드가 로드될 때(즉, 컴파일할 때) 일반 개체가 생성되고, 생성자 메서드를 사용하면 코드가 실행될 때 일반 개체가 생성됩니다. 글쓰기의 편리성과 직관성을 고려하여 실제 응용에서는 기본적으로 문자 쓰기를 사용합니다.

일반 객체가 생성된 후 이를 사용하는 두 가지 방법이 있습니다:

  • 일반 객체의 방법: regex.test(string)과 같은 문자열을 매개변수로 사용합니다.

  • 문자열 객체의 방법: string.match(regex)와 같은 일반 객체를 매개변수로 사용합니다.

이 두 가지 사용 방법을 아래에서 소개하겠습니다.

일반 객체의 속성과 메서드

Properties

일반 객체의 속성은 두 가지 범주로 나뉩니다.

첫 번째 카테고리는 수정자와 관련이 있으며 해당 수정자가 설정되었는지 여부를 나타내는 부울 값을 반환합니다.

  • ignoreCase: i 수정자가 설정되었는지 여부를 나타내는 부울 값을 반환합니다. 이 속성은 읽기 전용입니다.

  • global: g 수정자가 설정되었는지 여부를 나타내는 부울 값을 반환합니다. 이 속성은 읽기 전용입니다.

  • multiline: m 수정자가 설정되었는지 여부를 나타내는 부울 값을 반환합니다. 이 속성은 읽기 전용입니다.

var r = /abc/igm;
r.ignoreCase // true
r.global // true
r.multiline // true
로그인 후 복사

다른 카테고리는 수식어와 관련이 없는 속성으로 주로 다음 두 가지입니다.

  • lastIndex: 다음 검색이 시작되는 위치를 반환합니다. 이 속성은 읽고 쓸 수 있지만 g 수정자가 설정된 경우에만 의미가 있습니다.

  • source: 정규식의 문자열 형식을 반환합니다(백슬래시 제외). 이 속성은 읽기 전용입니다.

var r = /abc/igm;
r.lastIndex // 0
r.source // "abc"
로그인 후 복사

test()

일반 개체의 테스트 메서드는 현재 패턴이 매개변수 문자열과 일치할 수 있는지 여부를 나타내는 부울 값을 반환합니다.

/cat/.test('cats and dogs') // true
로그인 후 복사

위 코드는 매개변수 문자열에 cat이 포함되어 있는지 확인하고 결과는 true를 반환합니다.

정규 표현식에 g 수정자가 있는 경우 각 테스트 방법은 마지막 끝 위치부터 거꾸로 일치합니다.

var r = /x/g;
var s = '_x_x';
r.lastIndex // 0
r.test(s) // true
r.lastIndex // 2
r.test(s) // true
r.lastIndex // 4
r.test(s) // false
로그인 후 복사

위 코드의 일반 객체에는 g 수정자를 사용하는데, 이는 검색 위치를 기록한다는 의미입니다. 그런 다음 테스트 방법을 세 번 사용하고 매번 검색이 시작되는 위치는 이전 일치 이후의 위치입니다.

g 수정자를 사용하면 일반 객체의 lastIndex 속성을 통해 검색을 시작할 위치를 지정할 수 있습니다.

var r = /x/g;
var s = '_x_x';
r.lastIndex = 4;
r.test(s) // false
로그인 후 복사

위 코드는 문자열의 5번째 위치부터 검색을 시작하도록 지정하고 있습니다. 이 위치에는 문자가 없으므로 false가 반환됩니다.

lastIndex 속성은 동일한 정규식에만 유효하므로 이렇게 작성하는 것은 잘못되었습니다.

var count = 0;
while (/a/g.test('babaa')) count++;
로그인 후 복사

위 코드는 무한 루프를 발생시킵니다. 왜냐하면 while 루프의 각 일치 조건이 새로운 정규 표현식이기 때문에 lastIndex 속성이 항상 0이 되기 때문입니다.

정규 패턴이 빈 문자열이면 모든 문자열이 일치됩니다.

new RegExp('').test('abc')
// true
로그인 후 복사

exec()

일반 객체의 exec 메서드는 일치하는 결과를 반환할 수 있습니다. 일치하는 항목이 발견되면 각 구성원이 성공적으로 일치하는 부분 문자열을 포함하는 배열이 반환되고, 그렇지 않으면 null이 반환됩니다.

var s = '_x_x';
var r1 = /x/;
var r2 = /y/;
r1.exec(s) // ["x"]
r2.exec(s) // null
로그인 후 복사

위 코드에서 일반 객체 r1이 성공적으로 일치하면 배열이 반환되고, 일반 객체 r2가 일치하지 않으면 null이 반환됩니다.

정규 표현식에 괄호가 포함된 경우(예: "그룹 일치" 포함) 반환된 배열에는 여러 구성원이 포함됩니다. 첫 번째 멤버는 전체 일치 성공 결과이고, 후속 멤버는 괄호 안에 해당하는 성공적으로 일치된 그룹입니다. 즉, 두 번째 멤버는 첫 번째 브래킷에 해당하고, 세 번째 멤버는 두 번째 브래킷에 해당하는 식입니다. 전체 배열의 길이 속성은 그룹 일치 수에 1을 더한 것과 같습니다.

var s = '_x_x';
var r = /_(x)/;
r.exec(s) // ["_x", "x"]
로그인 후 복사

위 코드의 exec 메소드는 배열을 반환합니다. 첫 번째 멤버는 전체 일치의 결과이고 두 번째 멤버는 괄호 일치의 결과입니다.

exec 메소드의 반환 배열에는 다음 두 가지 속성도 포함됩니다.

  • 입력: 전체 원본 문자열.

  • index: 전체 패턴 일치에 성공한 시작 위치입니다(0부터 계산).

var r = /a(b+)a/;
var arr = r.exec('_abbba_aba_');
arr // ["abbba", "bbb"]
arr.index // 1
arr.input // "_abbba_aba_"
로그인 후 복사

위 코드의 index 속성은 원래 문자열의 두 번째 위치부터 일치가 성공했기 때문에 1과 같습니다.

如果正则表达式加上g修饰符,则可以使用多次exec方法,下一次搜索的位置从上一次匹配成功结束的位置开始。

var r = /a(b+)a/g;
var a1 = r.exec('_abbba_aba_');
a1 // ['abbba', 'bbb']
a1.index // 1
r.lastIndex // 6
var a2 = r.exec('_abbba_aba_');
a2 // ['aba', 'b']
a2.index // 7
r.lastIndex // 10
var a3 = r.exec('_abbba_aba_');
a3 // null
a3.index // TypeError: Cannot read property 'index' of null
r.lastIndex // 0
var a4 = r.exec('_abbba_aba_');
a4 // ['abbba', 'bbb']
a4.index // 1
r.lastIndex // 6
로그인 후 복사

上面代码连续用了四次exec方法,前三次都是从上一次匹配结束的位置向后匹配。当第三次匹配结束以后,整个字符串已经到达尾部,正则对象的lastIndex属性重置为0,意味着第四次匹配将从头开始。

利用g修饰符允许多次匹配的特点,可以用一个循环完成全部匹配。

var r = /a(b+)a/g;
var s = '_abbba_aba_';
while(true) {
 var match = r.exec(s);
 if (!match) break;
 console.log(match[1]);
}
// bbb
// b
로그인 후 복사

正则对象的lastIndex属性不仅可读,还可写。一旦手动设置了lastIndex的值,就会从指定位置开始匹配。但是,这只在设置了g修饰符的情况下,才会有效。

var r = /a/;
r.lastIndex = 7; // 无效
var match = r.exec('xaxa');
match.index // 1
r.lastIndex // 7
로그인 후 복사

上面代码设置了lastIndex属性,但是因为正则表达式没有g修饰符,所以是无效的。每次匹配都是从字符串的头部开始。

如果有g修饰符,lastIndex属性就会生效。

var r = /a/g;
r.lastIndex = 2;
var match = r.exec('xaxa');
match.index // 3
r.lastIndex // 4
로그인 후 복사

上面代码中,lastIndex属性指定从字符的第三个位置开始匹配。成功后,下一次匹配就是从第五个位置开始。

如果正则对象是一个空字符串,则exec方法会匹配成功,但返回的也是空字符串。

var r1 = new RegExp('');
var a1 = r1.exec('abc');
a1 // ['']
a1.index // 0
r1.lastIndex // 0
var r2 = new RegExp('()');
var a2 = r2.exec('abc');
a2 // ['', '']
a2.index // 0
r2.lastIndex // 0
로그인 후 복사

字符串对象的方法

字符串对象的方法之中,有4种与正则对象有关。

  • match():返回一个数组,成员是所有匹配的子字符串。

  • search():按照给定的正则表达式进行搜索,返回一个整数,表示匹配开始的位置。

  • replace():按照给定的正则表达式进行替换,返回替换后的字符串。

  • split():按照给定规则进行字符串分割,返回一个数组,包含分割后的各个成员。

下面逐一介绍。

String.prototype.match()

字符串对象的match方法对字符串进行正则匹配,返回匹配结果。

var s = '_x_x';
var r1 = /x/;
var r2 = /y/;
s.match(r1) // ["x"]
s.match(r2) // null
로그인 후 복사

从上面代码可以看到,字符串的match方法与正则对象的exec方法非常类似:匹配成功返回一个数组,匹配失败返回null。

如果正则表达式带有g修饰符,则该方法与正则对象的exec方法行为不同,会一次性返回所有匹配成功的结果。

var s = 'abba';
var r = /a/g;
s.match(r) // ["a", "a"]
r.exec(s) // ["a"]
로그인 후 복사

设置正则表达式的lastIndex属性,对match方法无效,匹配总是从字符串的第一个字符开始。

var r = /a|b/g;
r.lastIndex = 7;
'xaxb'.match(r) // ['a', 'b']
r.lastIndex // 0
로그인 후 복사

上面代码表示,设置lastIndex属性是无效的。

String.prototype.search()

字符串对象的search方法,返回第一个满足条件的匹配结果在整个字符串中的位置。如果没有任何匹配,则返回-1。

'_x_x'.search(/x/)
// 1
로그인 후 복사

上面代码中,第一个匹配结果出现在字符串的1号位置。

该方法会忽略g修饰符。

var r = /x/g;
r.lastIndex = 2; // 无效
'_x_x'.search(r) // 1
로그인 후 복사

上面代码中,正则表达式使用g修饰符之后,使用lastIndex属性指定开始匹配的位置,结果无效,还是从字符串的第一个字符开始匹配。

String.prototype.replace()

字符串对象的replace方法可以替换匹配的值。它接受两个参数,第一个是搜索模式,第二个是替换的内容。

str.replace(search, replacement)
로그인 후 복사

搜索模式如果不加g修饰符,就替换第一个匹配成功的值,否则替换所有匹配成功的值。

'aaa'.replace('a', 'b') // "baa"
'aaa'.replace(/a/, 'b') // "baa"
'aaa'.replace(/a/g, 'b') // "bbb"
로그인 후 복사

上面代码中,最后一个正则表达式使用了g修饰符,导致所有的b都被替换掉了。

replace方法的一个应用,就是消除字符串首尾两端的空格。

var str = ' #id p.class ';
str.replace(/^\s+|\s+$/g, '')
// "#id p.class"
로그인 후 복사

replace方法的第二个参数可以使用美元符号$,用来指代所替换的内容。

  • $& 指代匹配的子字符串。

  • $` 指代匹配结果前面的文本。

  • $' 指代匹配结果后面的文本。

  • $n 指代匹配成功的第n组内容,n是从1开始的自然数。

  • $$ 指代美元符号$。


'hello world'.replace(/(\w+)\s(\w+)/, '$2 $1')
// "world hello"
'abc'.replace('b', '[$`-$&-$\']')
// "a[a-b-c]c"
로그인 후 복사

replace方法的第二个参数还可以是一个函数,将每一个匹配内容替换为函数返回值。

'3 and 5'.replace(/[0-9]+/g, function(match){
 return 2 * match;
})
// "6 and 10"
var a = 'The quick brown fox jumped over the lazy dog.';
var pattern = /quick|brown|lazy/ig;
a.replace(pattern, function replacer(match) {
 return match.toUpperCase();
});
// The QUICK BROWN fox jumped over the LAZY dog.
로그인 후 복사

作为replace方法第二个参数的替换函数,可以接受多个参数。第一个参数是捕捉到的内容,第二个参数是捕捉到的组匹配(有多少个组匹配,就有多少个对应的参数)。此外,最后还可以添加两个参数,倒数第二个参数是捕捉到的内容在整个字符串中的位置(比如从第五个位置开始),最后一个参数是原字符串。下面是一个网页模板替换的例子。

var prices = {
 'pr_1': '$1.99',
 'pr_2': '$9.99',
 'pr_3': '$5.00'
};
var template = '/* ... */'; // 这里可以放网页模块字符串
template.replace(
 /(<span id=")(.*?)(">)(<\/span>)/g,
 function(match, $1, $2, $3, $4){
 return $1 + $2 + $3 + prices[$2] + $4;
 }
);
로그인 후 복사

上面代码的捕捉模式中,有四个括号,所以会产生四个组匹配,在匹配函数中用$1到$4表示。匹配函数的作用是将价格插入模板中。

String.prototype.split()

字符串对象的split方法按照正则规则分割字符串,返回一个由分割后的各个部分组成的数组。

str.split(separator, [limit])
로그인 후 복사

该方法接受两个参数,第一个参数是分隔规则,第二个参数是返回数组的最大成员数。

// 非正则分隔
'a, b,c, d'.split(',')
// [ 'a', ' b', 'c', ' d' ]
// 正则分隔,去除多余的空格
'a, b,c, d'.split(/, */)
// [ 'a', 'b', 'c', 'd' ]
// 指定返回数组的最大成员
'a, b,c, d'.split(/, */, 2)
[ 'a', 'b' ]
로그인 후 복사

上面代码使用正则表达式,去除了子字符串的逗号后面的空格。

// 例一
'aaa*a*'.split(/a*/)
// [ '', '*', '*' ]
// 例二
'aaa**a*'.split(/a*/)
// ["", "*", "*", "*"]
로그인 후 복사

上面代码的分割规则是0次或多次的a,由于正则默认是贪婪匹配,所以例一的第一个分隔符是aaa,第二个分割符是a,将字符串分成三个部分,包含开始处的空字符串。例二的第一个分隔符是aaa,第二个分隔符是0个a(即空字符),第三个分隔符是a,所以将字符串分成四个部分。

如果正则表达式带有括号,则括号匹配的部分也会作为数组成员返回。

'aaa*a*'.split(/(a*)/)
// [ '', 'aaa', '*', 'a', '*' ]
로그인 후 복사

上面代码的正则表达式使用了括号,第一个组匹配是“aaa”,第二个组匹配是“a”,它们都作为数组成员返回。

匹配规则

正则表达式对字符串的匹配有很复杂的规则。下面一一介绍这些规则。

字面量字符和元字符

大部分字符在正则表达式中,就是字面的含义,比如/a/匹配a,/b/匹配b。如果在正则表达式之中,某个字符只表示它字面的含义(就像前面的a和b),那么它们就叫做“字面量字符”(literal characters)。

/dog/.test("old dog") // true
로그인 후 복사

上面代码中正则表达式的dog,就是字面量字符,所以/dog/匹配“old dog”,因为它就表示“d”、“o”、“g”三个字母连在一起。

除了字面量字符以外,还有一部分字符有特殊含义,不代表字面的意思。它们叫做“元字符”(metacharacters),主要有以下几个。

(1)点字符(.)

点字符(.)匹配除回车(\r)、换行(\n) 、行分隔符(\u2028)和段分隔符(\u2029)以外的所有字符。

/c.t/

上面代码中,c.t匹配c和t之间包含任意一个字符的情况,只要这三个字符在同一行,比如cat、c2t、c-t等等,但是不匹配coot。

(2)位置字符

位置字符用来提示字符所处的位置,主要有两个字符。

  • ^ 表示字符串的开始位置

  • $ 表示字符串的结束位置

// test必须出现在开始位置
/^test/.test('test123') // true
// test必须出现在结束位置
/test$/.test('new test') // true
// 从开始位置到结束位置只有test
/^test$/.test('test') // true
/^test$/.test('test test') // false
로그인 후 복사

(3)选择符(|)

竖线符号(|)在正则表达式中表示“或关系”(OR),即cat|dog表示匹配cat或dog。

/11|22/.test('911') // true
로그인 후 복사

上面代码中,正则表达式指定必须匹配11或22。

多个选择符可以联合使用。

// 匹配fred、barney、betty之中的一个
/fred|barney|betty/
로그인 후 복사

选择符会包括它前后的多个字符,比如/ab|cd/指的是匹配ab或者cd,而不是指匹配b或者c。如果想修改这个行为,可以使用圆括号。

/a( |\t)b/.test('a\tb') // true
로그인 후 복사

上面代码指的是,a和b之间有一个空格或者一个制表符。

其他的元字符还包括\\、\*、+、?、()、[]、{}等,将在下文解释。

转义符

正则表达式中那些有特殊含义的字符,如果要匹配它们本身,就需要在它们前面要加上反斜杠。比如要匹配加号,就要写成\+。

/1+1/.test('1+1')
// false
/1\+1/.test('1+1')
// true
로그인 후 복사

上面代码中,第一个正则表达式直接用加号匹配,结果加号解释成量词,导致不匹配。第二个正则表达式使用反斜杠对加号转义,就能匹配成功。

正则模式中,需要用斜杠转义的,一共有12个字符:^、.、[、$、(、)、|、*、+、?、{和\\。需要特别注意的是,如果使用RegExp方法生成正则对象,转义需要使用两个斜杠,因为字符串内部会先转义一次。

(new RegExp('1\+1')).test('1+1')
// false
(new RegExp('1\\+1')).test('1+1')
// true
로그인 후 복사

上面代码中,RegExp作为构造函数,参数是一个字符串。但是,在字符串内部,反斜杠也是转义字符,所以它会先被反斜杠转义一次,然后再被正则表达式转义一次,因此需要两个反斜杠转义。

特殊字符

正则表达式对一些不能打印的特殊字符,提供了表达方法。

  • \cX 表示Ctrl-[X],其中的X是A-Z之中任一个英文字母,用来匹配控制字符。

  • [\b] 匹配退格键(U+0008),不要与\b混淆。

  • \n 匹配换行键。

  • \r 匹配回车键。

  • \t 匹配制表符tab(U+0009)。

  • \v 匹配垂直制表符(U+000B)。

  • \f 匹配换页符(U+000C)。

  • \0 匹配null字符(U+0000)。

  • \xhh 匹配一个以两位十六进制数(\x00-\xFF)表示的字符。

  • \uhhhh 匹配一个以四位十六进制数(\u0000-\uFFFF)表示的unicode字符。

字符类

字符类(class)表示有一系列字符可供选择,只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内,比如[xyz] 表示x、y、z之中任选一个匹配。

/[abc]/.test('hello world') // false
/[abc]/.test('') // true
로그인 후 복사

上面代码表示,字符串“hello world”不包含a、b、c这三个字母中的任一个,而字符串“”包含字母a。

有两个字符在字符类中有特殊含义。

(1)脱字符(^)

如果方括号内的第一个字符是[^],则表示除了字符类之中的字符,其他字符都可以匹配。比如,[^xyz]表示除了x、y、z之外都可以匹配。

/[^abc]/.test('hello world') // true
/[^abc]/.test('bbc') // false
로그인 후 복사

上面代码表示,字符串“hello world”不包含字母a、b、c中的任一个,所以返回true;字符串“bbc”不包含a、b、c以外的字母,所以返回false。

如果方括号内没有其他字符,即只有[^],就表示匹配一切字符,其中包括换行符,而点号(.)是不包括换行符的。

var s = 'Please yes\nmake my day!';
s.match(/yes.*day/) // null
s.match(/yes[^]*day/) // [ 'yes\nmake my day']
로그인 후 복사

上面代码中,字符串s含有一个换行符,点号不包括换行符,所以第一个正则表达式匹配失败;第二个正则表达式[^]包含一切字符,所以匹配成功。

注意,脱字符只有在字符类的第一个位置才有特殊含义,否则就是字面含义。

(2)连字符(-)

某些情况下,对于连续序列的字符,连字符(-)用来提供简写形式,表示字符的连续范围。比如,[abc]可以写成[a-c],[0123456789]可以写成[0-9],同理[A-Z]表示26个大写字母。

/a-z/.test('b') // false
/[a-z]/.test('b') // true
로그인 후 복사

上面代码中,当连字号(dash)不出现在方括号之中,就不具备简写的作用,只代表字面的含义,所以不匹配字符b。只有当连字号用在方括号之中,才表示连续的字符序列。

以下都是合法的字符类简写形式。

[0-9.,]
[0-9a-fA-F]
[a-zA-Z0-9-]
[1-31]
로그인 후 복사

上面代码中最后一个字符类[1-31],不代表1到31,只代表1到3。

注意,字符类的连字符必须在头尾两个字符中间,才有特殊含义,否则就是字面含义。比如,[-9]就表示匹配连字符和9,而不是匹配0到9。

连字符还可以用来指定Unicode字符的范围。

var str = "\u0130\u0131\u0132";
/[\u0128-\uFFFF]/.test(str)
// true
로그인 후 복사

另外,不要过分使用连字符,设定一个很大的范围,否则很可能选中意料之外的字符。最典型的例子就是[A-z],表面上它是选中从大写的A到小写的z之间52个字母,但是由于在ASCII编码之中,大写字母与小写字母之间还有其他字符,结果就会出现意料之外的结果。

/[A-z]/.test('\\') // true
로그인 후 복사

上面代码中,由于反斜杠(\\)的ASCII码在大写字母与小写字母之间,结果会被选中。

预定义模式

预定义模式指的是某些常见模式的简写方式。

  • \d 匹配0-9之间的任一数字,相当于[0-9]。

  • \D 匹配所有0-9以外的字符,相当于[^0-9]。

  • \w 匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_]。

  • \W 除所有字母、数字和下划线以外的字符,相当于[^A-Za-z0-9_]。

  • \s 匹配空格(包括制表符、空格符、断行符等),相等于[\t\r\n\v\f]。

  • \S 匹配非空格的字符,相当于[^\t\r\n\v\f]。

  • \b 匹配词的边界。

  • \B 匹配非词边界,即在词的内部。

下面是一些例子。

// \s的例子
/\s\w*/.exec('hello world') // [" world"]
// \b的例子
/\bworld/.test('hello world') // true
/\bworld/.test('hello-world') // true
/\bworld/.test('helloworld') // false
// \B的例子
/\Bworld/.test('hello-world') // false
/\Bworld/.test('helloworld') // true
로그인 후 복사

上面代码中,\s表示空格,所以匹配结果会包括空格。\b表示词的边界,所以“world”的词首必须独立(词尾是否独立未指定),才会匹配。同理,\B表示非词的边界,只有“world”的词首不独立,才会匹配。

通常,正则表达式遇到换行符(\n)就会停止匹配。

var html = "<b>Hello</b>\n<i>world!</i>";
/.*/.exec(html)[0]
// "<b>Hello</b>"
로그인 후 복사

上面代码中,字符串html包含一个换行符,结果点字符(.)不匹配换行符,导致匹配结果可能不符合原意。这时使用\s字符类,就能包括换行符。

var html = "<b>Hello</b>\n<i>world!</i>";
/[\S\s]*/.exec(html)[0]
// "<b>Hello</b>\n<i>world!</i>"
// 另一种写法(用到了非捕获组)
/(?:.|\s)*/.exec(html)[0]
// "<b>Hello</b>\n<i>world!</i>"
로그인 후 복사

上面代码中,[\S\s]指代一切字符。

重复类

模式的精确匹配次数,使用大括号({})表示。{n}表示恰好重复n次,{n,}表示至少重复n次,{n,m}表示重复不少于n次,不多于m次。

/lo{2}k/.test('look') // true
/lo{2,5}k/.test('looook') // true
로그인 후 복사

上面代码中,第一个模式指定o连续出现2次,第二个模式指定o连续出现2次到5次之间。

量词符

量词符用来设定某个模式出现的次数。

  • ? 问号表示某个模式出现0次或1次,等同于{0, 1}。

  • * 星号表示某个模式出现0次或多次,等同于{0,}。

  • + 加号表示某个模式出现1次或多次,等同于{1,}。

// t出现0次或1次
/t?est/.test('test') // true
/t?est/.test('est') // true
// t出现1次或多次
/t+est/.test('test") // true
/t+est/.test('ttest') // true
/t+est/.test('est') // false
// t出现0次或多次
/t*est/.test('test') // true
/t*est/.test('ttest') // true
/t*est/.test('tttest') // true
/t*est/.test('est') // true
로그인 후 복사

贪婪模式

上一小节的三个量词符,默认情况下都是最大可能匹配,即匹配直到下一个字符不满足匹配规则为止。这被称为贪婪模式。

var s = 'aaa';
s.match(/a+/) // ["aaa"]
로그인 후 복사

上面代码中,模式是/a+/,表示匹配1个a或多个a,那么到底会匹配几个a呢?因为默认是贪婪模式,会一直匹配到字符a不出现为止,所以匹配结果是3个a。

如果想将贪婪模式改为非贪婪模式,可以在量词符后面加一个问号。

var s = 'aaa';
s.match(/a+?/) // ["a"]
로그인 후 복사

上面代码中,模式结尾添加了一个问号/a+?/,这时就改为非贪婪模式,一旦条件满足,就不再往下匹配。

除了非贪婪模式的加号,还有非贪婪模式的星号(*)。

  • *?:表示某个模式出现0次或多次,匹配时采用非贪婪模式。

  • +?:表示某个模式出现1次或多次,匹配时采用非贪婪模式。

修饰符

修饰符(modifier)表示模式的附加规则,放在正则模式的最尾部。

修饰符可以单个使用,也可以多个一起使用。

// 单个修饰符
var regex = /test/i;
// 多个修饰符
var regex = /test/ig;
로그인 후 복사

(1)g修饰符

默认情况下,第一次匹配成功后,正则对象就停止向下匹配了。g修饰符表示全局匹配(global),加上它以后,正则对象将匹配全部符合条件的结果,主要用于搜索和替换。

var regex = /b/;
var str = 'abba';
regex.test(str); // true
regex.test(str); // true
regex.test(str); // true
로그인 후 복사

上面代码中,正则模式不含g修饰符,每次都是从字符串头部开始匹配。所以,连续做了三次匹配,都返回true。

var regex = /b/g;
var str = 'abba';
regex.test(str); // true
regex.test(str); // true
regex.test(str); // false
로그인 후 복사

上面代码中,正则模式含有g修饰符,每次都是从上一次匹配成功处,开始向后匹配。因为字符串“abba”只有两个“b”,所以前两次匹配结果为true,第三次匹配结果为false。

(2)i修饰符

默认情况下,正则对象区分字母的大小写,加上i修饰符以后表示忽略大小写(ignorecase)。

/abc/.test('ABC') // false
/abc/i.test('ABC') // true
로그인 후 복사

上面代码表示,加了i修饰符以后,不考虑大小写,所以模式abc匹配字符串ABC。

(3)m修饰符

m修饰符表示多行模式(multiline),会修改^和$的行为。默认情况下(即不加m修饰符时),^和$匹配字符串的开始处和结尾处,加上m修饰符以后,^和$还会匹配行首和行尾,即^和$会识别换行符(\n)。

/world$/.test('hello world\n') // false
/world$/m.test('hello world\n') // true
로그인 후 복사

上面的代码中,字符串结尾处有一个换行符。如果不加m修饰符,匹配不成功,因为字符串的结尾不是“world”;加上以后,$可以匹配行尾。

/^b/m.test('a\nb') // true
로그인 후 복사

上面代码要求匹配行首的b,如果不加m修饰符,就相当于b只能处在字符串的开始处。

组匹配

(1)概述

正则表达式的括号表示分组匹配,括号中的模式可以用来匹配分组的内容。

/fred+/.test('fredd') // true
/(fred)+/.test('fredfred') // true
로그인 후 복사

上面代码中,第一个模式没有括号,结果+只表示重复字母d,第二个模式有括号,结果+就表示匹配“fred”这个词。

下面是另外一个分组捕获的例子。

var m = 'abcabc'.match(/(.)b(.)/);
m
// ['abc', 'a', 'c']
로그인 후 복사

上面代码中,正则表达式/(.)b(.)/一共使用两个括号,第一个括号捕获a,第二个括号捕获c。

注意,使用组匹配时,不宜同时使用g修饰符,否则match方法不会捕获分组的内容。

var m = 'abcabc'.match(/(.)b(.)/g);
m
// ['abc', 'abc']
로그인 후 복사

上面代码使用带g修饰符的正则表达式,结果match方法只捕获了匹配整个表达式的部分。

在正则表达式内部,可以用\n引用括号匹配的内容,n是从1开始的自然数,表示对应顺序的括号。

/(.)b(.)\1b\2/.test("abcabc")
// true
로그인 후 복사

上面的代码中,\1表示前一个括号匹配的内容(即“a”),\2表示第二个括号匹配的内容(即“b”)。

下面是另外一个例子。

/y(..)(.)\2\1/.test('yabccab') // true
로그인 후 복사

括号还可以嵌套。

/y((..)\2)\1/.test('yabababab') // true
로그인 후 복사

上面代码中,\1指向外层括号,\2指向内层括号。

组匹配非常有用,下面是一个匹配网页标签的例子。

var tagName = /<([^>]+)>[^<]*<\/\1>/;
tagName.exec("<b>bold</b>")[1]
// 'b'
로그인 후 복사

上面代码中,圆括号匹配尖括号之中的标签,而\1就表示对应的闭合标签。

上面代码略加修改,就能捕获带有属性的标签。

var html = '<b class="hello">Hello</b><i>world</i>';
var tag = /<(\w+)([^>]*)>(.*?)<\/\1>/g;
var match = tag.exec(html);
match[1] // "b"
match[2] // "class="hello""
match[3] // "Hello"
match = tag.exec(html);
match[1] // "i"
match[2] // ""
match[3] // "world"
로그인 후 복사

(2)非捕获组

(?:x)称为非捕获组(Non-capturing group),表示不返回该组匹配的内容,即匹配的结果中不计入这个括号。

非捕获组的作用请考虑这样一个场景,假定需要匹配foo或者foofoo,正则表达式就应该写成/(foo){1, 2}/,但是这样会占用一个组匹配。这时,就可以使用非捕获组,将正则表达式改为/(?:foo){1, 2}/,它的作用与前一个正则是一样的,但是不会单独输出括号内部的内容。

请看下面的例子。

var m = 'abc'.match(/(?:.)b(.)/);
m // ["abc", "c"]
로그인 후 복사

上面代码中的模式,一共使用了两个括号。其中第一个括号是非捕获组,所以最后返回的结果中没有第一个括号,只有第二个括号匹配的内容。

下面是用来分解网址的正则表达式。

// 正常匹配
var url = /(http|ftp):\/\/([^/\r\n]+)(\/[^\r\n]*)?/;
url.exec('http://google.com/');
// ["http://google.com/", "http", "google.com", "/"]
// 非捕获组匹配
var url = /(?:http|ftp):\/\/([^/\r\n]+)(\/[^\r\n]*)?/;
url.exec('http://google.com/');
// ["http://google.com/", "google.com", "/"]
로그인 후 복사

上面的代码中,前一个正则表达式是正常匹配,第一个括号返回网络协议;后一个正则表达式是非捕获匹配,返回结果中不包括网络协议。

(3)先行断言

x(?=y)称为先行断言(Positive look-ahead),x只有在y前面才匹配,y不会被计入返回结果。比如,要匹配后面跟着百分号的数字,可以写成/\d+(?=%)/。

“先行断言”中,括号里的部分是不会返回的。

var m = 'abc'.match(/b(?=c)/);
m // ["b"]
로그인 후 복사

上面的代码使用了先行断言,b在c前面所以被匹配,但是括号对应的c不会被返回。

再看一个例子。

/Jack (?=Sprat|Frost)/.test('Jack Frost') // true
로그인 후 복사

(4)先行否定断言

x(?!y)称为先行否定断言(Negative look-ahead),x只有不在y前面才匹配,y不会被计入返回结果。比如,要匹配后面跟的不是百分号的数字,就要写成/\d+(?!%)/。

/\d+(?!\.)/.exec('3.14')
// ["14"]
로그인 후 복사

上面代码中,正则表达式指定,只有不在小数点前面的数字才会被匹配,因此返回的结果就是14。

“先行否定断言”中,括号里的部分是不会返回的。

var m = 'abd'.match(/b(?!c)/);
m // ['b']
로그인 후 복사

上面的代码使用了先行否定断言,b不在c前面所以被匹配,而且括号对应的d不会被返回。

参考链接

Axel Rauschmayer, JavaScript: an overview of the regular expression API

Mozilla Developer Network, Regular Expressions

Axel Rauschmayer, The flag /g of JavaScript's regular expressions

Sam Hughes, Learn regular expressions in about 55 minutes

相关推荐:

关于MySQL中REGEXP正则表达式使用小结

详谈MYSQL模式匹配REGEXP和like的代码用法分享

MySQL中使用replace、regexp进行正则表达式替换的用法分析

위 내용은 JavaScript의 RegExp 객체 구문 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. 크로스 플레이가 있습니까?
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. 주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. Dec 17, 2023 pm 06:55 PM

주식 분석을 위한 필수 도구: PHP 및 JS에서 캔들 차트를 그리는 단계를 배우십시오. 인터넷과 기술의 급속한 발전으로 주식 거래는 많은 투자자에게 중요한 방법 중 하나가 되었습니다. 주식분석은 투자자의 의사결정에 있어 중요한 부분이며 캔들차트는 기술적 분석에 널리 사용됩니다. PHP와 JS를 사용하여 캔들 차트를 그리는 방법을 배우면 투자자가 더 나은 결정을 내리는 데 도움이 되는 보다 직관적인 정보를 얻을 수 있습니다. 캔들스틱 차트는 주가를 캔들스틱 형태로 표시하는 기술 차트입니다. 주가를 보여주네요

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 Dec 17, 2023 am 09:39 AM

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 Dec 18, 2023 pm 03:39 PM

인터넷 금융의 급속한 발전으로 인해 주식 투자는 점점 더 많은 사람들의 선택이 되었습니다. 주식 거래에서 캔들 차트는 주가의 변화 추세를 보여주고 투자자가 보다 정확한 결정을 내리는 데 도움이 되는 일반적으로 사용되는 기술적 분석 방법입니다. 이 기사에서는 PHP와 JS의 개발 기술을 소개하고 독자가 주식 캔들 차트를 그리는 방법을 이해하도록 유도하며 구체적인 코드 예제를 제공합니다. 1. 주식 캔들 차트의 이해 주식 캔들 차트를 그리는 방법을 소개하기 전에 먼저 캔들 차트가 무엇인지부터 이해해야 합니다. 캔들스틱 차트는 일본인이 개발했습니다.

See all articles