> 웹 프론트엔드 > JS 튜토리얼 > Javascript에서 정규식을 사용하는 방법

Javascript에서 정규식을 사용하는 방법

小云云
풀어 주다: 2018-01-05 17:57:44
원래의
1738명이 탐색했습니다.

정규식은 사람들의 마음 속에는 이해하기 어려운 문자 덩어리일 수 있지만 문자열에 대한 효율적인 작업을 가능하게 하는 것은 바로 이러한 기호입니다. 정규식(Regular Expression)은 간단한 언어의 문법 사양입니다. 강력하고 편리하며 효율적인 텍스트 처리 도구입니다. 일반적인 상황에서 검색, 바꾸기 및 추출 작업을 구현하는 데 사용됩니다. 문제 자체는 복잡하지 않지만 정규식이 없으면 큰 문제가 됩니다. JavaScript의 정규 표현식은 매우 중요한 지식입니다. 이 기사에서는 정규 표현식의 기본 구문을 소개합니다.

Definition

정규식(Regular Expression)은 간단한 언어의 문법 사양으로, 문자열의 정보를 검색, 교체 및 교체하는 데 사용되는 강력하고 편리하며 효율적인 텍스트 처리 도구입니다. 추출 작업

JavaScript의 정규 표현식은 RegExp 객체로 표현됩니다. 하나는 리터럴 작성이고 다른 하나는 정규 표현식이 문자열을 처리하는 데 특히 유용합니다. 이 글은 정규식에 대한 기본 지식과 자바스크립트에서의 정규식 사용법을 요약한 것입니다.

첫 번째 부분에서는 JavaScript에서 정규식의 사용 시나리오를 간략하게 나열하고, 두 번째 부분에서는 정규식에 대한 기본 지식을 자세히 소개하고 이해하기 쉽게 몇 가지 예를 작성합니다.

이 글의 내용은 Rhino 책의 정규식 작성법과 js 정규식 장을 읽고 제가 직접 요약한 내용이므로 내용이 누락되거나 부정확할 수 있습니다. 전문가가 지나가다가 기사에서 잘못된 점을 발견하면 언제든지 수정해 주세요!

Javascript에서 정규 표현식의 사용

정규 표현식은 문자 조각의 특징적인 설명으로 생각할 수 있으며, 그 기능은 문자열 묶음에서 조건을 충족하는 하위 문자열을 찾는 것입니다. 예를 들어, 저는 JavaScript로 정규식을 정의합니다:

var reg=/hello/  或者 var reg=new RegExp("hello")
로그인 후 복사

그런 다음 이 정규식을 사용하여 여러 문자열에서 hello라는 단어를 찾을 수 있습니다. "찾기" 작업의 결과는 첫 번째 hello의 위치 찾기, hello를 다른 문자열로 바꾸기, 모든 hellos 찾기 등이 될 수 있습니다. 아래는 자바스크립트에서 정규식을 사용할 수 있는 함수 목록이며, 이들 함수의 기능에 대한 간략한 소개는 2부에서 소개하겠습니다.

String.prototype.search 메소드

는 원래 문자열에서 하위 문자열이 처음 나타나는 인덱스를 찾는 데 사용됩니다. 그렇지 않은 경우 -1

"abchello".search(/hello/); // 3
로그인 후 복사

String.prototype.replace 메소드

를 반환합니다. 문자를 바꾸는 데 사용됨 문자열의 하위 문자열

"abchello".replace(/hello/,"hi");  // "abchi"
로그인 후 복사

String.prototype.split method

은 문자열을 분할하는 데 사용됨

"abchelloasdasdhelloasd".split(/hello/); //["abc", "asdasd", "asd"]
로그인 후 복사

String.prototype.match method


은 하위 문자열을 캡처하는 데 사용됨 문자열에서 배열로. 기본적으로 하나의 결과만 배열에 캡처됩니다(정규식 정의 시 매개변수 g 추가). match 매개 변수 match 메서드는 정규 표현식에 전역 속성이 있는지 여부에 따라 다르게 작동합니다. 이에 대해서는 나중에 정규 표현식 그룹화에서 설명합니다.

RegExp.prototype.test 메소드

는 문자열에 하위 문자열이 포함되어 있는지 테스트하는 데 사용됩니다.

"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
로그인 후 복사

RegExp.prototype.exec 메소드

는 문자열의 일치 메소드와 유사합니다. 조건에 맞는 문자열을 배열로 캡쳐하는데, 두 가지 차이점이 있습니다.

1. exec 메소드는 정규식에 전역 속성이 있는지 여부에 관계없이 한 번에 하위 문자열만 배열로 캡처할 수 있습니다.

/hello/.test("abchello"); // true
로그인 후 복사

2. 정규식 개체(즉, JavaScript의 RegExp 개체) 다음에 캡처를 시작할 위치를 나타내는 데 사용되는 lastIndex 속성이 있습니다. exec 메소드가 실행될 때마다 lastIndex는 일치하는 문자가 발견되지 않고 null이 반환될 때까지 푸시된 후 처음부터 캡처가 시작됩니다. . 이 속성은 캡처된 문자열의 하위 문자열을 반복하는 데 사용할 수 있습니다.

var reg=/hello/g;
reg.exec("abchelloasdasdhelloasd");  // ["hello"]
로그인 후 복사

정규 표현식의 기본

메타 문자

위의 첫 번째 섹션에서는 /hello/를 예로 들었지만 실제 애플리케이션에서는 다음과 같은 요구 사항이 발생할 수 있습니다. 불확실한 숫자 문자열 일치, 시작 위치 일치, 일치가 끝나는 위치 및 일치하는 공백 문자. 여기서 메타문자를 사용할 수 있습니다.

메타 문자:

var reg=/hello/g;
reg.lastIndex; //0
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //8
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //19
reg.exec("abchelloasdasdhelloasd"); // null
reg.lastIndex; //0
로그인 후 복사

위의 소문자를 대문자로 변경하여 작성된 반의어 메타 문자, 예를 들어 숫자가 아닌 모든 문자와 일치: D

반복을 나타내는 데 사용되는 일부 메타 문자도 있습니다. 문자가 소개됩니다. 다음 콘텐츠에서.

문자 범위

문자 범위를 나타내려면 [] 안에 - 기호를 사용하세요. 예:

//匹配数字: \d
"ad3ad2ad".match(/\d/g); // ["3", "2"]
//匹配除换行符以外的任意字符: .
"a\nb\rc".match(/./g); // ["a", "b", "c"]
//匹配字母或数字或下划线 : \w
"a5_ 汉字@!-=".match(/\w/g); // ["a", "5", "_"]
//匹配空白符:\s
"\n \r".match(/\s/g); //[" ", " ", ""] 第一个结果是\n,最后一个结果是\r
//匹配【单词开始或结束】的位置 : \b
"how are you".match(/\b\w/g); //["h", "a", "y"] 
// 匹配【字符串开始和结束】的位置: 开始 ^ 结束 $
"how are you".match(/^\w/g); // ["h"]
로그인 후 복사

반복 & 탐욕과 게으름

우선 반복에 대해 이야기해 보겠습니다. 일부 반복되는 문자를 일치시키려면 반복과 관련된 몇 가지 정규식을 사용해야 합니다.


// 匹配字母 a-z 之间所有字母
/[a-z]/
// 匹配Unicode中 数字 0 到 字母 z 之间的所有字符
/[0-z]/ 
// unicode编码查询地址:
//https://en.wikibooks.org/wiki/Unicode/Character_reference/0000-0FFF
//根据上面的内容,我们可以找出汉字的Unicode编码范围是 \u4E00 到 \u9FA5,所以我们可以写一个正则表达式来判断一个字符串中是否有汉字
/[\u4E00-\u9FA5]/.test("测试"); // true
로그인 후 복사

위 결과에서 볼 수 있듯이 문자 테스트 뒤의 숫자가 0회 이상 반복될 수 있으면 정규식으로 캡처된 하위 문자열이 가능한 많은 숫자를 반환합니다(예: /testd*). /는 test123과 일치하며 test나 test12가 아닌 test123을 반환합니다.

正则表达式捕获字符串时,在满足条件的情况下捕获尽可能多的字符串,这就是所谓的“贪婪模式”。

对应的”懒惰模式“,就是在满足条件的情况下捕获尽可能少的字符串,使用懒惰模式的方法,就是在字符重复标识后面加上一个 "?",写法如下


// 数字重复3~5次,满足条件的情况下返回尽可能少的数字
"test12345".match(/test\d{3,5}?/); //["test123"]
// 数字重复1次或更多,满足条件的情况下只返回一个数字
"test12345".match(/test\d+?/); // ["test1"]
로그인 후 복사

字符转义

在正则表达式中元字符是有特殊的含义的,当我们要匹配元字符本身时,就需要用到字符转义,比如:

/\./.test("."); // true

分组 & 分支条件

正则表达式可以用 " ()  " 来进行分组,具有分组的正则表达式除了正则表达式整体会匹配子字符串外,分组中的正则表达式片段也会匹配字符串。

分组按照嵌套关系和前后关系,每个分组会分配得到一个数字组号,在一些场景中可以用组号来使用分组。

在 replace、match、exec函数中,分组都能体现不同的功能。

replace函数中,第二个参数里边可以用 $+数字组号来指代第几个分组的内容,如:

" the best language in the world is java ".replace(/(java)/,"$1script"); // " the best language in the world is javascript "
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"    (\/\w+)分组匹配的就是 /index ,

在第二个参数中为其添加上版本号

match函数中,当正则表达式有全局属性时,会捕获所有满足正则表达式的子字符串


"abchellodefhellog".match(/h(ell)o/g); //["hello", "hello"]
로그인 후 복사

但是当正则表达式没有全局属性,且正则表达式中有分组的时候,match函数只会返回整个正则表达式匹配的第一个结果,同时会将分组匹配到的字符串也放入结果数组中:


"abchellodefhellog".match(/h(ell)o/); //["hello", "ell"]
// 我们可以用match函数来分解url,获取协议、host、path、查询字符串等信息
"http://www.baidu.com/test?t=5".match(/^((\w+):\/\/([\w\.]+))\/([^?]+)\?(\S+)$/);
// ["http://www.baidu.com/test?t=5", "http://www.baidu.com", "http", "www.baidu.com", "test", "t=5"]
로그인 후 복사

exec函数在正则表达式中有分组的情况下,表现和match函数很像,只是无论正则表达式是否有全局属性,exec函数都只返回一个结果,并捕获分组的结果


/h(ell)o/g.exec("abchellodefhellog"); //["hello", "ell"]
로그인 후 복사

当正则表达式需要匹配几种类型的结果时,可以用到分支条件,例如


"asdasd hi asdad hello asdasd".replace(/hi|hello/,"nihao"); //"asdasd nihao asdad hello asdasd"
"asdasd hi asdad hello asdasd".split(/hi|hello/); //["asdasd ", " asdad ", " asdasd"]
로그인 후 복사

 注意,分支条件影响它两边的所有内容, 比如 hi|hello  匹配的是hi或者hello,而不是 hiello 或者 hhello

分组中的分支条件不会影响分组外的内容


"abc acd bbc bcd ".match(/(a|b)bc/g); //["abc", "bbc"]
로그인 후 복사

后向引用

正则表达式的分组可以在其后边的语句中通过  \+数字组号来引用

比如


// 匹配重复的单词
/(\b[a-zA-Z]+\b)\s+\1/.exec(" asd sf hello hello asd"); //["hello hello", "hello"]
로그인 후 복사

断言

 (?:exp) , 用此方式定义的分组,正则表达式会匹配分组中的内容,但是不再给此分组分配组号,此分组在replace、match等函数中的作用也会消失,效果如下:


/(hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world", "hello"],正常捕获结果字符串和分组字符串
/(?:hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world"]
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"
"/static/app1/js/index.js".replace(/(?:\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js$1-v0.0.1.js"
로그인 후 복사

(?=exp) 这个分组用在正则表达式的后面,用来捕获exp前面的字符,分组中的内容不会被捕获,也不分配组号


/hello\s(?=world)/.exec("asdadasd hello world asdasd") // ["hello "]
로그인 후 복사

(?!exp)  和前面的断言相反,用在正则表达式的后面,捕获后面不是exp的字符,同样不捕获分组的内容,也不分配组号


/hello\s(?!world)/.exec("asdadasd hello world asdasd") //null
로그인 후 복사

处理选项

javascript中正则表达式支持的正则表达式有三个,g、i、m,分别代表全局匹配、忽略大小写、多行模式。三种属性可以自由组合共存。


// 全局匹配 g 
"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
//忽略大小写 i
"abchelloasdasdHelloasd".match(/hello/g); //["hello"]
"abchelloasdasdHelloasd".match(/hello/gi); //["hello","Hello"]
로그인 후 복사

在默认的模式下,元字符 ^ 和 $ 分别匹配字符串的开头和结尾处,模式 m 改变了这俩元字符的定义,让他们匹配一行的开头和结尾


"aadasd\nbasdc".match(/^[a-z]+$/g); //null 字符串^和$之间有换行符,匹配不上 [a-z]+ ,故返回null
"aadasd\nbasdc".match(/^[a-z]+$/gm); // ["aadasd", "basdc"] ,改变^$的含义,让其匹配一行的开头和末尾,可以得到两行的结果
로그인 후 복사

相关推荐:

Replace中的正则表达式_正则表达式

JS使用正则表达式找出最长连续子串长度

关于HTML用正则表达式检验表格方法

위 내용은 Javascript에서 정규식을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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