집 > 기사 > 웹 프론트엔드 > JS 기본 시리즈의 정규 표현식

JS 기본 시리즈의 정규 표현식

黄舟원래의: 2017-02-20 14:09:141307검색

오늘은 JS를 처음 접하시는 분들을 위해 간단하게 정규식을 소개하겠습니다. 혹시 논란이 되는 부분이 있으면 메시지를 남겨주세요!

JS 기본 시리즈의 정규 표현식

1.1 정규 표현식이란

정규 표현식은 문자 패턴을 기술하는 객체, ECMAScript RegExp 클래스는 정규식과 String 및 RegExp 모두 정규식을 사용하여 강력한 패턴 일치와 텍스트 검색 및 교체를 위한 함수를 정의합니다.

정규식은 문자열 패턴을 일치시키고 이를 검색하고 바꾸는 데 사용됩니다. 정규식은 문자열에 대한 패턴 일치를 수행하는 강력한 도구입니다.

1.2 정규식의 역할

정규식은 주로 클라이언트의 입력 데이터를 검증하는 데 사용됩니다.

사용자가 양식을 작성하고 버튼을 클릭하면 양식이 서버로 전송되며 일반적으로 PHP, ASP.NET, JSP와 같은 서버 스크립트를 사용하여 추가 처리됩니다. . 클라이언트측 검증으로 인해 서버측 시스템 리소스를 많이 절약하고 더 나은 사용자 경험을 제공할 수 있습니다.

2. 정규식 만들기==(123)==

정규식을 사용하려면 먼저 정규식 개체를 만들어야 합니다. 생성할 객체 수 방법:

2.1 방법 1: new 키워드를 사용하여

var patt = new RegExp(pattern,modifiers);

를 생성합니다. 정규식 모델. 문자열 형식

매개변수 2: 모드 수정자. 전역 일치, 대소문자 구분 일치 및 여러 줄 일치를 지정하는 데 사용됩니다

<script type="text/javascript">
  /*
   创建了一个正则表达式
   参数1：模式是：girl，意思是说可以匹配 "girl"这样的字符串
   参数2：模式修饰符：gi g代表全局匹配 i代表不区分大小写
  */
 var pa = new RegExp("girl", "gi");
  //测试参数中的字符串"你好我的girl" 是否与匹配模式匹配。
  var isExist = pa.test("你好我的girl"); // 在本例中，是匹配的，这个字符串包含girl，所以返回true
  alert(isExist); //true
</script>

2.2 방법 2: 정규식 리터럴 사용

var pa = /pattern/modifiers;

가운데 두 개의 /는 정규 표현식의 패턴을 나타내며, 마지막 / 뒤에는 패턴 수식어

가 옵니다. 예: 위의 예는 다음과 같이 작성할 수 있습니다. var pa = /girl/gi;

참고: 이때 모드 및 모드 수식자는 큰따옴표나 작은따옴표를 추가할 수 있습니다

<script type="text/javascript">
 var pa = /girl/gi;
 alert(pa.test("厉害了我的girl")); //true
</script>

3. 정규식 패턴 수정자 ==(126)==

JavaScript에는 3가지 패턴 수정자가 있습니다: g i u

g: 전반적인 상황을 나타냅니다. 이는 문자열이 여러 번 일치함을 의미합니다. g를 쓰지 않으면 한 번만 일치합니다. 일단 일치하면 다시 일치하지 않습니다.

i: 대소문자가 무시됨을 나타냅니다. 이는 일치 시 대소문자를 구분하지 않음을 의미합니다.

u: 여러 줄이 일치할 수 있음을 나타냅니다.

4. 정규식 메서드에 대한 자세한 설명==(127)==

일반적으로 사용되는 정규식 메서드에는 test()와 exec()가 있습니다. 🎜>

4.1 test() 메소드
test(string)

매개변수: 일치시킬 문자열

반환값: 다음과 같은 경우 true를 반환합니다. 일치는 성공, 실패하면 거짓

이 방법을 사용하는 것은 대상 문자열이 특정 패턴과 일치하는지 여부만 알고 싶을 때 매우 편리하며 해당 텍스트 내용은 알 필요가 없습니다. 따라서 test() 메서드는 if 문에서 자주 사용됩니다.

<script type="text/javascript">
 var pa = /girl/gi;
 if(pa.test("厉害了我的girl")){
  alert("这个女孩和你很配");
 }else {
  alert("你注定没有女孩去匹配");
 }
</script>

4.2 exec() 메서드
exec(string): 이 메서드는 그룹 캡처를 위해 특별히 설계되었습니다.

매개변수: 일치시킬 문자열

반환값: 배열이 반환됩니다. 일치하는 항목이 없으면 null을 반환합니다.

반환 값 배열 정보:

실제로 Array의 인스턴스입니다.

하지만 이 배열에는 index와 input이라는 두 가지 추가 속성이 있습니다.

index: 소스 문자열에서 일치하는 문자열의 인덱스를 나타냅니다.

입력: 일치하는 Source 문자열을 나타냅니다.

배열의 첫 번째 항목은 전체 패턴과 일치하는 문자열이고, 나머지 항목은 패턴의 캡처 그룹과 일치하는 문자열입니다.

캡처 그룹이 없으면 배열의 첫 번째 항목만. 그룹 캡처 개념에 대해서는 나중에 설명하겠습니다

<script type="text/javascript">
 var pa = /girl/gi;
 var testStr = "myGirl, yourgirl, hisgIrl";
 var girls = pa.exec(testStr); //捕获
 alert(girls.length + ":" + (girls instanceof Array)); //正则表达式没有捕获组，所以数组长度为1
 alert(girls[0]); //第一次捕获的是 Girl
  //因为我们是用的全局匹配，所以此次匹配的时候从上次匹后的位置开始继续匹配
 alert(pa.exec(testStr)[0]);  // girl
 alert(pa.exec(testStr)); // gIrl
 alert(pa.exec(testStr)); //继续向后没有匹配的字符串，所以返回null
  // 返回null，如果继续再匹配，则会回到字符串的开始，重写开始匹配。
 alert(pa.exec(testStr)); // Girl
  // ...开启新一轮匹配
</script>

따라서 일치하는 모든 문자열을 찾으려면 루프를 사용할 수 있습니다. 일치 결과가 null

<script type="text/javascript">
 var pa = /girl/gi;
 var testStr = "myGirl, yourgirl, hisgIrl";
 var girls;
 while(girls = pa.exec(testStr)){ //如果等于null,会自动转成 false，结束。
  alert(girls);
 }
</script>

그룹입니다. 정규식에서 ()로 묶인 작업은 그룹입니다. 그룹은 중첩될 수 있습니다.

<script type="text/javascript">
  //()内的内容就是第1组(Girl)，其实我们完整真个表达式可以看出第0组 girl(Girl)
  // 将来对应着匹配结果数组的下标。 
 var pa = /girl(Girl)/gi; 
 var test = "girlGirl abdfjla Girlgirl fal girl";
 var girls;
 while(girls = pa.exec(test)){
  //匹配之后，数组的第0个元素对应的这第0组的匹配结果，第1个元素对应着第1组的匹配结果
  for (var i = 0; i < girls.length; i++) {
   console.log(girls[i]);
  }
  console.log("-------------");
 }
</script>
//最终运行结果：
girlGirl
Girl
-------------
Girlgirl
girl
------------

五、正则表达式规则==(124)==

表达式规则

正则表达式元字符是包含特殊含义的字符。它们有一些特殊功能，可以控制匹配模式的

方式。反斜杠后的元字符将失去其特殊含义。

字符类：单个字符和数字

[0-9A-Za-z]

元字符/元符号匹配情况

. 匹配除换行符外的任意字符

[a-z0-9] 匹配括号中的字符集中的任意字符

[^a-z0-9] 匹配任意不在括号中的字符集中的字符

\d ==[0-9] 匹配数字

\D ==[^0-9] 匹配非数字，同[^0-9]相同

\w [0-9A-Za-z_] 匹配字母和数字及_

\W 匹配非(字母和数字及_)

字符类：空白字符

元字符/元符号匹配情况

\0 匹配null 字符

\b 匹配空格字符

\n 匹配换行符

\r 匹配回车字符

\t 匹配制表符

\s 匹配空白字符、空格、制表符和换行符

\S 匹配非空白字符

字符类：锚字符

元字符/元符号匹配情况

^ 行首匹配

$ 行尾匹配

字符类：重复字符

元字符/元符号匹配情况

? 例如（x?）匹配0个或1 个x

* 例如（x*）匹配0个或任意多个x

+ 例如（x+）匹配至少一个x

(xyz)+ 匹配至少一个(xyz)

{m,n} 例如x{m,n} n>=次数>=m 匹配最少m个、最多n个x

{n} 匹配前一项n次

{n,} 匹配前一项n次，或者多次

六、常用正则表示==(128)==

1、检查邮政编码

var pattern = /[1-9][0-9]{5}/; //共6位数字，第一位不能为0
var str = &#39;224000&#39;;
alert(pattern.test(str));

2、检查文件压缩包

var pattern = /[\w]+\.zip|rar|gz/; //\w 表示所有数字和字母加下划线
var str = &#39;123.zip&#39;; //\.表示匹配.，后面是一个选择
alert(pattern.test(str));

3、删除多余空格

var pattern = /\s/g; //g 必须全局，才能全部匹配
var reg=new RegExp(&#39;\\s+&#39;,&#39;g&#39;);
var str = &#39;111 222 333&#39;;
var result = str.replace(pattern,&#39;&#39;); //把空格匹配成无空格
alert(result);

4、删除空格

var pattern = /^\s+/; 
var str = &#39; goo gle &#39;;
alert(str+" "+str.length);
var result = str.replace(pattern, &#39;&#39;);
alert(result+" "+result.length);
pattern = /\s+$/; 
result = result.replace(pattern, &#39;&#39;);
alert(result+" "+result.length);
pattern = /\s+/g; 
result = result.replace(pattern, &#39;&#39;);
alert(result+" "+result.length);
5、简单的电子邮件验证
var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/;
var str = &#39;yc60.com@gmail.com&#39;;
alert(pattern.test(str));
var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/;
var str = &#39;yc60.com@gmail.com&#39;;
alert(pattern.test(str));

七、支持正则表达式的字符串方法


方法	描述
search	检索与正则表达式相匹配的第一个匹配项的索引。
match	找到一个或多个正则表达式的匹配。
replace	替换与正则表达式匹配的子串。
split	把字符串分割为字符串数组。

<script type="text/javascript">
 var s = "Abc123aBc";
 alert(s.search(/abc/gi)); 
 alert(s.search(/abc/gi)); // 即使设置的全局模式，每次search也是从开始向后查找
 //match方法和正则表达式的exec()方法的作用是一样的，但是match会一次性把所有的匹配放在一个数组中，全部返回
 alert(s.match(/abc/gi)); // Abc,aBc
 alert(s.replace(/[ab]/gi, "x"));   //把a或b替换成x
 var ss = s.split(/[0-9]+/gi); //用1个或多个数字切割。 Abc,aBc
 alert(ss);
</script>

以上所述是小编给大家介绍的JS基础系列之正则表达式，更多相关内容请关注PHP中文网（www.php.cn）！

성명：

이전 기사：프론트엔드 면접 경험 요약다음 기사：프론트엔드 면접 경험 요약

JS 기본 시리즈의 정규 표현식

관련 기사