> 웹 프론트엔드 > JS 튜토리얼 > js 정규식에 대한 자세한 설명

js 정규식에 대한 자세한 설명

迷茫
풀어 주다: 2017-03-26 17:21:14
원래의
1501명이 탐색했습니다.

정규식은 문자열 찾기, 일치, 처리, 문자열 바꾸기 및 변환, 입력 및 출력 등에 매우 유용합니다. 다음은 일반적으로 사용되는 몇 가지 정규식입니다.

자주 사용하는 일반 문자

1.: 다음 문자 변경 특수 문자, 리터럴 문자, 역참조 또는 8진수 이스케이프 문자로 표시됩니다. 예를 들어 'n'은 문자 "n"과 일치합니다. 'n'은 개행 문자와 일치합니다. 시퀀스 ''는 ""와 일치하고 "("는 "("와 일치합니다.

2.^: 입력 문자열과 일치 RegExp 개체의 Multiline 속성이 설정된 경우 ^는 'n' 또는 'r' 뒤의 위치와도 일치합니다.

3.

입력 문자열 RegExp 개체의 Multiline 속성이 설정된 경우 $는 'n' 또는 'r' 앞의 위치와도 일치합니다. 4.$: 이전 하위 표현식과 일치합니다. 예를 들어 zo는 "z" 및 "zoo" 등과 일치할 수 있습니다.

5에서 유효합니다. *: 이전 하위 표현식과 한 번 이상 일치합니다. 'zo+'는 "zo" 및 "zoo"와 일치하지만 "z"는 일치하지 않습니다.6.

<.>

: 이전 하위 표현식과 0번 또는 1번 일치합니다. 예를 들어 "do(es)?"는 "do"와 일치할 수 있습니다. do" 또는 "does" ?는 {0. ,1}과 동일합니다. +7.

: n은 a입니다. 음수가 아닌 정수는 n번 일치합니다. o{2}'는 "Bob"의 'o'와 일치할 수 없지만 "food"의 두 o는 일치할 수 있습니다 ?8.

: n은 음수가 아닌 정수입니다. 예를 들어 'o{2,}'는 "Bob"의 'o'와 일치할 수 없습니다. "foooood"의 모든 o와 일치할 수 있습니다. 'o{0,}'는 'o*'와 같습니다. : m과 n은 모두 음수가 아닌 정수입니다. 여기서 n {n}10.

: 이 문자 바로 뒤에 다른 제한기호(*, +, ?, {n}, {n,}, {n,m })가 오면 일치 모드는 일치하지 않습니다. -greedy. 비탐욕 모드는 검색된 문자열과 최대한 일치하는 반면, 기본 욕심 모드는 검색된 문자열과 최대한 일치합니다. 예를 들어 문자열 "oooo"는 일치합니다. 단일 "o"이고 'o+'는 모든 'o'와 일치합니다. {n,}11.

: "n"을 제외한 모든 단일 문자와 일치합니다. 'n'을 포함한 모든 문자를 일치시키려면 '[.n]'과 같은 패턴을 사용하십시오. {n,m}12.

: 패턴을 일치시켜 이 일치 항목을 얻습니다. 얻은 일치 항목은 VBScript의 SubMatches 컬렉션 또는 JScript의 $0…$9 속성을 사용하여 생성된 Matches 컬렉션에서 얻을 수 있습니다. 괄호 문자를 일치시키려면 '(' 또는 ')'를 사용하십시오.

13.(?:pattern): 패턴과 일치하지만 일치하는 결과를 얻지 못합니다. 이는 검색되지 않는 일치이며 나중을 위해 저장되지 않음을 의미합니다. 사용. 이는 "or" 문자(|)를 사용하여 패턴의 일부를 결합할 때 유용합니다. 예를 들어 'industr(?:y|ies)는 'industry|industries'보다 짧은 표현입니다.

14.(?=pattern): 정방향 조회, 문자열 일치 패턴의 시작 부분에서 검색 문자열을 일치시킵니다. 이는 가져오지 않는 일치입니다. 즉, 나중에 사용하기 위해 일치 항목을 가져올 필요가 없습니다. 예를 들어, 'Windows (?=95|98|NT|2000)'는 "Windows 2000"의 "Windows"와 일치하지만 "Windows 3.1"의 "Windows"와 일치하지 않습니다. 프리페치는 문자를 소비하지 않습니다. 즉, 일치가 발생한 후 다음 일치 항목에 대한 검색은 프리페치를 포함하는 문자 뒤에서 시작하는 것이 아니라 마지막 일치 직후에 시작됩니다.

15.(?!pattern): 부정 조회, 패턴과 일치하지 않는 문자열의 시작 부분에 있는 검색 문자열과 일치합니다. 이는 가져오지 않는 일치입니다. 즉, 나중에 사용하기 위해 일치 항목을 가져올 필요가 없습니다. 예를 들어, 'Windows(?!95|98|NT|2000)'는 "Windows 3.1"의 "Windows"와 일치하지만 "Windows 2000"의 "Windows"와는 일치하지 않습니다. 프리페치는 문자를 소비하지 않습니다. 즉, 일치가 발생한 후 프리페치가 포함된 문자 뒤에서 시작하는 대신 마지막 일치 직후에 다음 일치 항목에 대한 검색이 시작됩니다

16. x|y: x 또는 y와 일치합니다. 예를 들어 'z|food'는 "z" 또는 "food"와 일치합니다. '(z|f)ood'는 "zood" 또는 "food"와 일치합니다.

17.[xyz]: 캐릭터 컬렉션. 포함된 문자 중 하나와 일치합니다. 예를 들어 '[abc]'는 "plain"의 'a'와 일치합니다.

18.[^xyz]: 음수 문자 집합입니다. 포함되지 않은 모든 문자와 일치합니다. 예를 들어 '1'은 "plain"의 'p'와 일치합니다.

19.[a-z]: 문자 범위. 지정된 범위 내의 모든 문자와 일치합니다. 예를 들어 '[a-z]'는 'a'부터 'z'까지의 범위에 있는 모든 소문자 알파벳 문자와 일치합니다.

20.[^a-z]: 음수 문자 범위. 지정된 범위 내에 없는 모든 문자와 일치합니다. 예를 들어 '2'는 'a'부터 'z'까지의 범위에 없는 모든 문자와 일치합니다.

21.b: 단어 경계, 즉 단어와 공백 사이의 위치를 ​​일치시킵니다. 예를 들어, 'erb'는 "never"의 'er'와 일치하지만 "동사"의 'er'와는 일치하지 않습니다.

22.B: 단어가 아닌 경계를 일치시킵니다. 'erB'는 "동사"의 'er'와 일치하지만 "never"에서는 일치하지 않습니다.

23.cx: x로 지정된 제어 문자와 일치합니다. 예를 들어, cM은 Control-M 또는 캐리지 리턴 문자와 일치합니다. x 값은 A-Z 또는 a-z 중 하나여야 합니다. 그렇지 않으면 c는 리터럴 'c' 문자로 처리됩니다.

24.d: 숫자와 일치합니다. [0-9]와 동일합니다.

25.D: 숫자가 아닌 문자와 일치합니다. 3과 동일합니다.

26.f: 폼 피드와 일치합니다. x0c 및 cL과 동일합니다.

27.n: 개행 문자와 일치합니다. x0a 및 cJ와 동일합니다.

28.r: 캐리지 리턴 문자와 일치합니다. x0d 및 cM과 동일합니다.

29.s: 공백, 탭, 폼 피드 등을 포함한 모든 공백 문자와 일치합니다. [fnrtv]와 동일합니다.

30.S: 공백이 아닌 모든 문자와 일치합니다. 4와 동일합니다.

31.t: 탭 문자와 일치합니다. x09 및 cI와 동일합니다.

32.v: 세로 탭 문자와 일치합니다. x0b 및 cK와 동일합니다.

33.w: 밑줄을 포함한 모든 단어 문자와 일치합니다. '[A-Za-z0-9_]'와 동일합니다.

34.W: 단어가 아닌 모든 문자와 일치합니다. '5'와 같습니다.

35.xn: n을 일치시킵니다. 여기서 n은 16진수 이스케이프 값입니다. 16진수 이스케이프 값은 정확히 두 자리 길이여야 합니다. 예를 들어 'x41'은 "A"와 일치합니다. 'x041'은 'x04' 및 "1"과 동일합니다. ASCII 인코딩은 정규식에서 사용할 수 있습니다.

36.num: num과 일치합니다. 여기서 num은 양의 정수입니다. 획득한 일치 항목에 대한 참조입니다. 예를 들어 '(.)1'은 두 개의 연속된 동일한 문자와 일치합니다.

37.n: 8진수 이스케이프 값 또는 역참조를 식별합니다. n 앞에 가져온 n개 이상의 하위 표현식이 있으면 n은 역방향 참조입니다. 그렇지 않고 n이 8진수(0-7)이면 n은 8진수 이스케이프 값입니다.

38.nm: 8진수 이스케이프 값 또는 역참조를 식별합니다. nm 앞에 최소 nm개의 획득 가능한 하위 표현식이 있는 경우 nm은 역방향 참조입니다. nm 앞에 최소한 n의 획득이 있으면 n은 역방향 참조이고 그 뒤에는 리터럴 m이 옵니다. 이전 조건 중 어느 것도 참이 아니고 n과 m이 모두 8진수(0-7)인 경우 nm는 8진수 이스케이프 값 nm과 일치합니다.

39.nml: n이 8진수(0-3)이고 m과 l이 모두 8진수인 경우 (0-7), 8진수 이스케이프 값 nml과 일치합니다.

RegExp 유형

ECMAScript는 다음과 같이 RegExp 유형을 통해 정규식을 지원합니다.

var expression = /pattern/flags;
로그인 후 복사

패턴 (pattern) 부분은 문자 클래스, 한정자, 그룹화, 정방향 검색 및 역참조를 포함할 수 있는 단순하거나 복잡한 정규식일 수 있습니다. 각 정규식에는 정규식의 동작을 나타내는 하나 이상의 주석 (flags)이 있을 수 있습니다. 다음 세 가지 기호가 있습니다.

  • g: 전역 모드를 나타냅니다. 즉, 모드가 모든 문자열에 적용됩니다. 첫 번째 일치 항목을 찾았을 때 즉시 중지하지 마십시오.

  • i: 대소문자를 구분하지 않는 모드를 나타냅니다.

  • m: 여러 줄 모드를 나타냅니다. 즉, 텍스트 줄의 끝에 도달하면 계속해서 패턴이 일치하는 항목이 다음 줄에 있는지 검색합니다.

正则表达式定义方式

以字面量的形式来定义正则表达式

例如:匹配第一个bat或者cat,不区分大小写

var pattern = /[bc]at/i;
로그인 후 복사

使用RegExp构造函数

它接收两个参数:一个是要匹配的字符串模式,另一个是可选的标志字符串。可以使用字面量定义的任何表达式,都可以使用构造函数来定义,还是以上面的例子为例:

var pattern = new RegExp("[bc]at","i");
로그인 후 복사

注意:RegExp构造函数模式参数时字符串,所以再某些情况下要对字符进项双重转义。所有元字符都必须双重转义,如字面量模式为/\[bc\]at/,那么等价的字符串为"/\\[bc\\]at/"

例子:

var re = null,
    i;    for(i=0; i < 10; i++){
        re = /cat/g;
        console.log(re.test("catastrophe"));
    }    for(i=0; i < 10; i++){
        re = new RegExp("cat","g");
        console.log(re.test("catastrophe"));
    }
로그인 후 복사

打印结果都为10个true

正则表达式方法

RegExp对象的exec()方法

该方法是专门为捕获组而设计的,其接受一个参数,即要应用模式的字符串,然后返回包含第一个匹配项信息的数组;或者在没有匹配项的情况下返回null。返回的数组虽然是Array的实例,但是包含两个额外的属性:indexinput。其中index表示匹配项在字符串中的位置,而input表示应用字符串表达式的字符串。
例:

var text = "mom and dad and baby";var pattern = /mom( and dad( and baby)?)?/gi;var matches = pattern.exec(text);
console.log(matches.index); 
//0console.log(matches.input); 
//mom and dad and babyconsole.log(matches[0]);    
//mom and dad and babyconsole.log(matches[1]);    
//and dad and babyconsole.log(matches[2]);    
//and baby
로그인 후 복사

对于exec()方法而言,即使在模式中设置了全局标志g,它每次也只是返回一个匹配项。在不设置全局标志的情况下,在同一个字符串上多次调用exec()方法将始终返回第一个匹配项的信息。而在设置全局标志的情况下,每次调用exec()则都会在字符串中继续查找新匹配项,如下例子:

var text = "cat, bat, sat, fat";var pattern1 = /.at/;var matches = pattern1.exec(text);
console.log(matches.index); //0console.log(matches[0]);  //catconsole.log(pattern1.lastIndex); //0matches = pattern1.exec(text);
console.log(matches.index); //0console.log(matches[0]);  //catconsole.log(pattern1.lastIndex); 
//0var pattern2 = /.at/g;var matches = pattern2.exec(text);
console.log(matches.index); //0console.log(matches[0]);  //catconsole.log(pattern2.lastIndex); //3var matches = pattern2.exec(text);
console.log(matches.index); //5console.log(matches[0]);  //batconsole.log(pattern2.lastIndex); //8
로그인 후 복사

注意:IEJavaScript实现lastIndex属性上存在偏差,即使在非全局模式下,lastIndex属性每次也都在变化。

test()方法

正则表达式常用方法test(),它接受一个字符串参数。在模式与该参数匹配的情况下返回true,否则返回false
例如:

var text ="000-00-0000";var pattern = /\d{3}-\d{2}-\d{4}/;if(pattern.test(text)){
    console.log(&#39;the pattern was matched.&#39;);
}
로그인 후 복사

match方法

获取正则匹配到的结果,以数组的形式返回例如:

"186a619b28".match(/\d+/g); 
// ["186","619","28"]
로그인 후 복사

replace方法

replace 本身是JavaScript字符串对象的一个方法,它允许接收两个参数:

replace([RegExp|String],[String|Function])

第1个参数可以是一个普通的字符串或是一个正则表达式.
第2个参数可以是一个普通的字符串或是一个回调函数.

如果第2个参数是回调函数,每匹配到一个结果就回调一次,每次回调都会传递以下参数:

  • result: 本次匹配到的结果

  • $1,...$9: 正则表达式中有几个(),就会传递几个参数,$1~$9分别代表本次匹配中每个()提取的结果,最多9个

  • offset:记录本次匹配的开始位置

  • source:接受匹配的原始字符串

以下是replace和JS正则搭配使用的几个常见经典案例:

(1)实现字符串的trim函数,去除字符串两边的空格

String.prototype.trim = function(){ 
  //方式一:将匹配到的每一个结果都用""替换
  return this.replace(/(^\s+)|(\s+$)/g,function(){    return "";
  }); 
  //方式二:和方式一的原理相同
  return this.replace(/(^\s+)|(\s+$)/g,&#39;&#39;);
};
로그인 후 복사

^s+ 表示以空格开头的连续空白字符,s+$ 表示以空格结尾的连续空白字符,加上() 就是将匹配到的结果提取出来,由于是 | 的关系,因此这个表达式最多会match到两个结果集,然后执行两次替换:

String.prototype.trim = function(){  /**
   * @param rs:匹配结果
   * @param $1:第1个()提取结果
   * @param $2:第2个()提取结果
   * @param offset:匹配开始位置
   * @param source:原始字符串   */
  this.replace(/(^\s+)|(\s+$)/g,function(rs,$1,$2,offset,source){    //arguments中的每个元素对应一个参数    console.log(arguments);
  });
}; 
" abcd ".trim();
로그인 후 복사

输出结果:

[" ", " ", undefined, 0, " abcd "] 
//第1次匹配结果
[" ", undefined, " ", 5, " abcd "] 
//第2次匹配结果
로그인 후 복사

(2)提取浏览器url中的参数名和参数值,生成一个key/value的对象

function getUrlParamObj(){  var obj = {};  //获取url的参数部分
  var params = window.location.search.substr(1);  //[^&=]+ 表示不含&或=的连续字符,加上()就是提取对应字符串
  params.replace(/([^&=]+)=([^&=]*)/gi,function(rs,$1,$2){
    obj[$1] = $2;
  }); 
  return obj;
}
로그인 후 복사

/([^&=]+)=([^&=]*)/gi 每次匹配到的都是一个完整key/value,形如 <span style="color: #ff0000;">xxxx=xxx</span>, 每当匹配到一个这样的结果时就执行回调,并传递匹配到的keyvalue,对应到$1$2

(3)在字符串指定位置插入新字符串

String.prototype.insetAt = function(str,offset){ 
  //使用RegExp()构造函数创建正则表达式
  var regx = new RegExp("(.{"+offset+"})"); 
  return this.replace(regx,"$1"+str);
}; 
"abcd".insetAt(&#39;xyz&#39;,2); //在b和c之间插入xyz//结果 "abxyzcd"
로그인 후 복사

offset=2时,正则表达式为:(^.{2}) .表示除\n之外的任意字符,后面加{2} 就是匹配以数字或字母组成的前两个连续字符,加()就会将匹配到的结果提取出来,然后通过replace将匹配到的结果替换为新的字符串,形如:结果=结果+str

(4) 将手机号12988886666转化成129 8888 6666

function telFormat(tel){
 
  tel = String(tel); 
  //方式一
  return tel.replace(/(\d{3})(\d{4})(\d{4})/,function (rs,$1,$2,$3){    return $1+" "+$2+" "+$3
  }); 
  //方式二
  return tel.replace(/(\d{3})(\d{4})(\d{4})/,"$1 $2 $3");
}
로그인 후 복사

(\d{3}\d{4}\d{4}) 可以匹配完整的手机号,并分别提取前3位、4-7位和8-11位,"$1 $2 $3" 是在三个结果集中间加空格组成新的字符串,然后替换完整的手机号。

常用实例

匹配第一个bat或者cat,不区分大小写: <span style="color: #ff0000;">/[bc]at/i</span> 或者 new RegExp("[bc]at","i");

匹配所有以"at"结尾的3个字符组合,不区分大小写:/.at/gi;

只能输入数字:^[0-9]*$;

只能输入n位的数字:^\d{n}$

只能输入至少n位的数字:^\d{n,}$

只能输入m~n位的数字:^\d{m,n}$

只能输入零和非零开头的数字:^(0|[1-9][0-9]*)$

只能输入有两位小数的正实数:^[0-9]+(.[0-9]{2})?$

只能输入有1~3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$

只能输入非零的正整数:^\+?[1-9][0-9]*$

只能输入长度为3的字符:^.{3}$

영문 26자로 구성된 문자열만 입력 가능 ^[A-Za-z]+$

숫자, 영문 26자로 구성된 문자열만 입력 가능 of: ^[A-Za-z0-9]+$

숫자, 영문 26자 또는 밑줄로 구성된 문자열만 입력 가능: ^w+$

사용자 비밀번호 확인: 문자로 시작하고 길이가 6~18자여야 하며 문자, 숫자, 밑줄만 포함할 수 있습니다. ^[a-zA-Z]w{5,17}$

^%&',;=?$"와 같은 문자가 포함되어 있는지 확인하세요. [^%&',;=?$x22]+

만 가능합니다. 한자 입력: ^[u4e00-u9fa5]{0,}$

이메일 주소 확인: ^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$

인터넷 URL 확인 :^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$

ID번호(15자리 또는 18자리) 확인 : ^d{15}|d{18}$

IP 주소 확인: ^((2[0-4]d|25[0-5]|[01]?dd?).){3}(2[0-4]d|25[0-5]|[01]?dd?)$

두 개의 겹치는 문자를 일치시킵니다. 예를 들어 "aabbc11asd"의 경우 반환 결과는 aa bb 11입니다. 세 가지 일치 세트: (w)1

쌍을 이루는 HTML 태그 일치: <(?<tag>[^s>]+)[^>]*>.*</k<tag>>

1-58 사이의 숫자 일치: /^([1-9]|[1-5][0-8])$/

사이의 정수와 일치 -90 및 90(포함): ^(-?[1-8][0-9]|-?[1-9]|-?90|0) $

위 내용은 js 정규식에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿