JavaScript

정규 표현식

youngseokim_kr 2021. 10. 25. 21:17

정규표현식 with JavaScript

정규표현식이란 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴)입니다.
간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능 등을 정규식 패턴으로 빠르게 수행할 수 있습니다.

정규표현식은 크게 다음과 같은 역할을 수행합니다.

  1. 문자 검색(search)
  2. 문자 대체(replace)
  3. 문자 추출(extract)

정규표현식 테스트 사이트

https://regex101.com/
https://regexr.com/
https://regexper.com/

자바스크립트 정규식 생성

생성자 함수 방식

RegExp 생성자 함수를 호출하여 사용할 수 있습니다.

const regexp1 = new RegExp("^abc");
// new RegExg(표현식)

const regexp2 = new RegExp("^abc", "gi");
// new RegExg(표현식, 플래그)

리터럴(Literal) 방식

정규표현식은 /로 감싸진 패턴을 리터럴로 사용합니다.

const regexp1 = /^abc/;
// /표현식/

const regexp2 = /^abc/gi;
// /표현식/플래그

생성자 방식 , 리터럴 방식

const str = `    //벡틱 기호 안에 쓰면 띄어쓰기 가능
010-1234-5678
thesecon@gmail.com
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog
 abbcccdddd
 `  
//생성자
const regexp = new RegExp('the', '')  //처음 하나만
const regexp = new RegExp('the', 'g')  //모든 결과
const regexp = new RegExp('the', 'gㅑ')  //모든 결과 대소문자 구분 x

//리터럴방식
const regexp=/the/gi

 console.log(str.match(regexp))

메소드문법설명

exec 정규식.exec(문자열) 일치하는 하나의 정보(Array) 반환
test 정규식.test(문자열) 일치 여부(Boolean) 반환
match 문자열.match(정규식) 일치하는 문자열의 배열(Array) 반환
search 문자열.search(정규식) 일치하는 문자열의 인덱스(Number) 반환
replace 문자열.replace(정규식,대체문자) 일치하는 문자열을 대체하고 대체된 문자열(String) 반환
split 문자열.split(정규식) 일치하는 문자열을 분할하여 배열(Array)로 반환
toString 생성자_정규식.toString() 생성자 함수 방식의 정규식을 리터럴 방식의 문자열(String)로 반환
let str = `    //벡틱 기호 안에 쓰면 띄어쓰기 가능
010-1234-5678
thesecon@gmail.com
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog
 abbcccdddd
 `  


//리터럴방식
const regexp=/fox/gi
 console.log(regexp.test(str))  //true

 const regexp=/HEROPY/gi
 console.log(regexp.test(str))  //false

 const regexp=/fox/gi
//const 는 재할당 x let은 재할당 가능
str = str.replace(regexp, 'AAA')   //이렇게 하면 원본 데이터 변환
 console.log(str.replace(regexp, 'AAA'))  //fox -> AAA로 변환 원본 손상 x

 

플래그설명

g 모든 문자와 여러 줄 일치(global)
i 영어 대소문자를 구분 않고 일치(insensitive, ignore case)
m 여러 줄 일치(multi line)
u 유니코드(unicode)
y lastIndex 속성으로 지정된 인덱스에서만 1회 일치(sticky)
let str = `    //벡틱 기호 안에 쓰면 띄어쓰기 가능
010-1234-5678
thesecon@gmail.com
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog
 abbcccdddd
 `  


//리터럴방식
console.log(str.match(/the/))  //the 하나 찾음
console.log(str.match(/\.$/gi))   //전체 마침표가 점인지 확인
console.log(str.match(/\.$/gim))  //각각 줄에서 마침표

정규식 패턴설명

^ 줄(Line)의 시작에서 일치, /^abc/
$ 줄(Line)의 끝에서 일치, /xyz$/
. 임의의 한 문자와 일치
a|b a 또는 b와 일치, 인덱스가 작은 것을 우선 반환
* 0회 이상 연속으로 반복되는 문자와 가능한 많이 일치, {0,}와 동일
*? 0회 이상 연속으로 반복되는 문자와 가능한 적게 일치(lazy), {0}와 동일
+ 1회 이상 연속으로 반복되는 문자에 가능한 많이 일치, {1,}와 동일
+? 1회 이상 연속으로 반복되는 문자에 가능한 적게 일치(lazy), {1}와 동일
? 없거나 1회 가능한 많이 일치
?? 없거나 1회 가능한 적게 일치(lazy)
{3} 3(숫자)개 연속 일치
{3,} 3개 이상 연속 일치
{3,5} 3개 이상 5개 이하(3~5개) 연속 일치
{3,5}? 3개 이상 5개 이하(3~5개) 연속 중 가능한 적은 3개 연속 일치(lazy), {3}와 동일
() 캡처(Capture)할 그룹
(?<>) 캡처 그룹 이름 지정, /(?<name>pattern)/ ES2018
\1~9 정규식 내 캡처된 값 참조, /(abc)\1/
(?:) 캡처(Capture)하지 않는 그룹
(?=) 앞쪽 일치(Lookahead), /ab(?=c)/
(?!) 부정 앞쪽 일치(Negative Lookahead), /ab(?!c)/
(?<=) 뒤쪽 일치(Lookbehind), /(?<=ab)c/ ES2018
(?<!) 부정 뒤쪽 일치(Negative Lookbehind), /(?<!ab)c/ ES2018
[abc] a 또는 b 또는 c와 일치, 점(.)이나 별표(*) 같은 특수 문자는 []안에서 특수 문자가 아님, /\.[.]/
[a-z] a부터 z 사이의 문자 구간에 일치(영어 소문자)
[A-Z] A부터 Z 사이의 문자 구간에 일치(영어 대문자)
[0-9] 0부터 9 사이의 문자 구간에 일치(숫자)
[가-힣] 가부터 힣 사이의 문자 구간에 일치(한글)
[2-7] 2부터 7 사이의 문자 구간에 일치(2,3,4,5,6,7)
[b-f] b부터 f 사이의 문자 구간에 일치(b,c,d,e,f)
[다-바] 다부터 바 사이의 문자 구간에 일치(다,라,마,바)
[^abc] a 또는 b 또는 c가 아닌 나머지 문자에 일치(부정)
\ 이스케이프 문자, /\.\?\/\$\^/
\b 63개 문자(영문 대소문자 52개 + 숫자 10개 + _(underscore))가 아닌 나머지 문자에 일치하는 경계(boundary)
\B 63개 문자에 일치하는 경계
\d 숫자(Digit)에 일치
\D 숫자가 아닌 문자에 일치
\p{} 유니코드 속성(Property) 집합에 맞는 문자에 일치, /\p{Emoji}/u ES2018
\P{} 유니코드 속성 집합에 맞지 않는 문자에 일치, /\p{Uppercase}/u ES2018
\s 공백(Space, Tab 등)에 일치
\S 공백이 아닌 문자에 일치
\w 63개 문자(Word, 영문 대소문자 52개 + 숫자 10개 + _)에 일치
\W 63개 문자가 아닌 나머지 문자에 일치
\x 16진수 문자에 일치, /\x61/는 a에 일치
\0 8진수 문자에 일치, /\141/은 a에 일치
\u 유니코드(Unicode) 문자에 일치, /\u0061/는 a에 일치
\c 제어(Control) 문자에 일치
\f 폼 피드(FF, U+000C) 문자에 일치
\n 줄 바꿈(LF, U+000A) 문자에 일치
\r 캐리지 리턴(CR, U+000D) 문자에 일치
\t 탭 (U+0009) 문자에 일치
$` 문자 대체(replace) 시 일치한 문자 이전 값 참조
$' 문자 대체(replace) 시 일치한 문자 이후 값 참조
$+ 문자 대체(replace) 시 마지막으로 캡처된 값 참조
$& 문자 대체(replace) 시 일치한 문자 결과 전체 참조
$_ 문자 대체(replace) 시 입력(input)된 문자 전체 참조
$1~9 문자 대체(replace) 시 캡처(Capture)된 값 참조
let str = `    //벡틱 기호 안에 쓰면 띄어쓰기 가능
010-1234-5678
thesecon@gmail.com
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog
 abbcccdddd
 hxyp
 `  


//리터럴방식
console.log(
  str.match(/d$/gm) // 한줄에 끝부분 알파벳 d 
  str.match(/^t/gm)  //시작에 있는 t
  str.match(/./g)  //문자 데이터의 모든 문자
  str.match(/h..p/g)  //h  p를 잘찾음
  str.match(/fox|dog/g) //두개 동시에 찾기 | (or)
  str.match(/fox|dog/)  //fox결과만 출력
  str.match(/https?/g)  //물음표가 붙은 s가 있거나 없거나 https, http
  str.match(/d{2}/g)  //dd
  str.match(/d{2,3}/g) //d가 2개이상 3개 이하
  str.match(/\w{2,3}/g) //숫자와 알파벳 2개이상 3개 이하
  str.match(/\\bw{2,3}\b/g) 
  str.match(/{fox}/g)  //f또는 o또는 x를 모두 찾는다.
  str.match(/[0-9]{1,}}/g) //연속되는 모든 숫자
  str.match(/[가-힣]{1,}/g) //띄어쓰기로 구분된 모든 한글
  str.match(/\w/g)  //word, 대소영문52개 + 숫자10개 + _ 
  str.match(/\bf\w{1,}\b/g)  //경계가 오고 f로 시작해서 63개문자가 하나이상 오고 경계에서 끝나는 f로시작하는 모든문자
  

  )

'JavaScript' 카테고리의 다른 글

class, object  (0) 2021.12.20
js 데이터타입  (0) 2021.12.08
OMDb API  (0) 2021.10.25
json, storage  (0) 2021.10.25
lodash 매소드[uniqBy, unionBy, find, findIndex, remove]  (0) 2021.10.25