Javascript_regular 표현식에서 정규 표현식의 사용 및 기본 구문
정규식(정규식)은 간단한 언어의 문법 사양으로, 실제 개발 과정에서 정규식이 매우 중요한 역할을 합니다. 배우고 이해하는 것도 어렵습니다. 오늘 와서 편집자와 함께 살펴보세요! !
이전 단어 정규 표현식은 사람들의 마음 속에는 이해하기 어려운 문자 덩어리일 수 있지만 효율적인 문자열 연산을 가능하게 하는 것은 이러한 기호입니다. 흔히 그렇듯이 문제 자체는 복잡하지 않지만, 정규식이 부족하면 큰 문제가 됩니다. JavaScript에서 정규식은 매우 중요한 지식입니다. 이 글에서는 정규식의 기본 구문을 소개합니다
Definition 정규식(Regular Expression)은 강력하고 편리한 간단한 언어의 문법 사양입니다. 문자열의 정보에 대한 검색, 교체 및 추출 작업을 구현하기 위해 일부 메서드에 사용되는 효율적인 텍스트 처리 도구
JavaScript의 정규 표현식은 RegExp 개체로 표현됩니다. 하나는 리터럴 쓰기 방법입니다. 생성자 작성 방법
정규 표현식은 특히 문자열을 처리하는 데 유용합니다. JavaScript에서 정규 표현식을 사용할 수 있는 곳은 많습니다. 이 글에서는 정규 표현식과 Javascript의 정규 표현식에 대한 기본 사항을 설명합니다.
첫 번째 부분에서는 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
는 문자열의 하위 문자열을 바꾸는 데 사용됩니다.
"abchello".replace(/hello/,"hi"); // "abchi"
는 문자열을 분할하는 데 사용됩니다.
"abchelloasdasdhelloasd".split(/hello/); //["abc", "asdasd", "asd"]
는 문자열의 하위 문자열을 배열로 캡처하는 데 사용됩니다. 기본적으로 하나의 결과만 배열에 캡처됩니다(정규식 정의 시 매개변수 g 추가). match match 메소드는 매개변수의 정규 표현식에 전역 속성이 있는지 여부에 따라 다르게 작동합니다. 이에 대해서는 나중에 정규 표현식 그룹화에서 설명합니다.
는 문자열에 하위 문자열이 포함되어 있는지 테스트하는 데 사용됩니다.
"abchelloasdasdhelloasd".match(/hello/); //["hello"] "abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
RegExp.prototype.exec 메소드
는 문자열의 일치 메소드와 유사합니다. 또한 조건에 맞는 문자열을 문자열에서 배열로 캡처하지만 두 가지 차이점이 있습니다.
1. exec 메소드는 정규 표현식에 전역 속성이 있는지 여부에 관계없이 한 번에 하위 문자열만 배열로 캡처할 수 있습니다.
/hello/.test("abchello"); // true
2. )에는 lastIndex 속성이 사용되어 다음에 캡처를 시작할 위치를 나타냅니다. exec 메서드가 실행될 때마다 lastIndex는 일치하는 문자를 찾을 수 없을 때까지 푸시백되고 null이 반환된 다음 캡처가 시작됩니다. 시작. 이 속성은 캡처된 문자열의 하위 문자열을 반복하는 데 사용할 수 있습니다.
var reg=/hello/g; reg.exec("abchelloasdasdhelloasd"); // ["hello"]
정규식의 기초
Metacharacters위의 첫 번째 섹션에서는 /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
另外还有一些用来表示重复的元字符,会在下面的内容中介绍。
字符范围
在 [] 中使用符号 - ,可以用来表示字符范围。如:
// 匹配字母 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
重复 & 贪婪与懒惰
首先来讲重复,当我们希望匹配一些重复的字符时,就需要用到一些和重复相关的正则表达式,写法如下
//重复n次 {n} "test12".match(/test\d{3}/); // null "test123".match(/test\d{3}/); // ["test123"] //重复n次或更多次 {n,} "test123".match(/test\d{3,}/); // ["test123"] //重复n到m次 "test12".match(/test\d{3,5}/); // null "test12345".match(/test\d{3,5}/); // ["test12345"] "test12345678".match(/test\d{3,5}/); // ["test12345"] // 匹配字符test后边跟着数字,数字重复0次或多次 "test".match(/test\d*/); // ["test"] "test123".match(/test\d*/); // ["test123"] //重复一次或多次 "test".match(/test\d+/) ; // null "test1".match(/test\d*/); //["test1"] //重复一次或0次 "test".match(/test\d?/) ; // null "test1".match(/test\d?/); //["test1"]
从上面的结果可以看到,字符test后边跟着的数字可以重复0次或多次时,正则表达式捕获的子字符串会返回尽量多的数字,比如/test\d*/匹配 test123 ,返回的是test123,而不是test或者test12。
正则表达式捕获字符串时,在满足条件的情况下捕获尽可能多的字符串,这就是所谓的“贪婪模式”。
对应的”懒惰模式“,就是在满足条件的情况下捕获尽可能少的字符串,使用懒惰模式的方法,就是在字符重复标识后面加上一个 "?",写法如下
// 数字重复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"] ,改变^$的含义,让其匹配一行的开头和末尾,可以得到两行的结果
总结
以上所述是小编给大家介绍的Javascript中正则表达式的使用及基本语法,希望对大家有所帮助!!
相关推荐:
위 내용은 Javascript_regular 표현식에서 정규 표현식의 사용 및 기본 구문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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

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

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

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