정규표현식은 다음과 같은 역할을 수행한다.
1. 문자 검색
2. 문자 대체
3. 문자 추출
테스트사이트 : regexr.com
생성자
new RegExp('표현', '옵션')
new RegExp('[a-z],'gi')
리터럴
/표현/옵션
/[a-z]/gi
일단, match함수를 알아보자..
const stro = ' is impressreddive.'
console.log(stro.match('red'))
결과는 이렇게 나옴 !
이제 써보자.
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog
abbcccdddd
`
const regexp = new RegExp('the','g')
console.log(str.match(regexp))
결과가 두개로 나옴.
대문자 소문자 상관없이 찾으로면 gi를 쓴다.
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog
abbcccdddd
`
const regexp = new RegExp('the','gi')
console.log(regexp)
console.log(str.match(regexp))
이 정규표현식을 리터럴 방식으로 만들어보자.
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog
abbcccdddd
`
const regexp = /the/gi
console.log(regexp)
console.log(str.match(regexp))
다음으로, 정규표현식을 다루는 메소드 들을 살펴보자.
1. test
예제 :
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog
abbcccdddd
`
const regexp = /fox/gi
console.log(regexp.test(str))
결과 : true나옴!
2. replace
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog
abbcccdddd
`
const regexp = /fox/gi
console.log(str.replace(regexp, 'AAA'))
결과 :
*플래그
g : 모든 문자 일치
i : 영어 대소문자를 구분 않고 일치
m : 여러 줄 일치
3. match
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog
abbcccdddd
`
const regexp = /the/gi
console.log(str.match(regexp))
the만 쓰면 1개만 반환한다.
gi까지 쓰면 대문자도 포함되므로 3개 배열이 출력됨.
4. \ 의 역할
. : 정규포현식에서 마침표 하나는 특정한 문자를 검색하는 하나의 패턴이다. 그래서 정말 점 역할을 하기 위해 \ 기호를 앞에 붙여준다. /\./
5. $ 의 역할
끝나는~ 이라는 뜻임.
/\.$/ : 점으로 끝나는 줄
예제 :
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd.
`
const regexp = /\.$/gim
console.log(str.match(regexp))
gim으로 꼭 써줘야 총 2개가 나온다.
마지막으로, 정규식의 패턴에 대해 알아보자.
1. ^ab : 줄 시작에 있는 ab와 일치
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
`
console.log(str.match(/^t/gm))
결과 : ['t'] 나옴!
2. ab$ : 줄 끝에있는 ab와 일치
예제 :
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
`
console.log(str.match(/d$/gm))
['d'] 가 결과로 나옴!
3. . : 임의의 한 문자와 일치
예제)
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
`
console.log(str.match(/./gm))
결과 :
또다른 예제 )
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
`
console.log(str.match(/h..p/gm))
결과 :
4. a|b
a또는 b와 일치
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
`
console.log(str.match(/fox|dog/gm))
결과 :
5. ab? : 마지막 글짜는 있을수도 있고 없을수도 있음
예제 :
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
https://localhost:2332
`
console.log(str.match(/https?/gm)) //s는 있을수도 있고 없을수도 있음.
결과 :
6. {3} : 3개 연속 일치
d가 두번 연속되는 것을 찾아라
예제 :
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
https://localhost:2332
`
console.log(str.match(/d{2}/g))
결과 :
7. {3,} : 3개 이상 연속 일치
d가 두개이상 연속되는 것을 찾아라.
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
https://localhost:2332
`
console.log(str.match(/d{2,}/g))
결과 :
8. {3,5} : 3개 이상 5개 이하 연속 일치
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
https://localhost:2332
`
console.log(str.match(/d{2,3}/g))
결과 :
다른 예제를 살펴보자.
\w : 숫자를 포함한 영어 알파벳을 의미한다.
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
https://localhost:2332
`
console.log(str.match(/\w{2,3}/g))
결과 :
숫자와 알파벳을 포함한 모든 2개나 3개의 글자를 반환한다.
\b : 숫자를 포함한 영어 알파벳이 아닌, 경계를 만들어준다.
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
https://localhost:2332
`
console.log(str.match(/\b\w{2,3}\b/g))
결과 :
2글자이상 3글자 이하인데 문자나 숫자가 아닌 것들로 둘러쌓인 친구들이 나온다.
9. [abc] : a또는 b또는 c
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
https://localhost:2332
`
console.log(str.match(/[fox]/g))
fox와 상관없이 f,o,x 가 들어간거 다 반환함.
10. [a-z] : a부터 z사이의 문자 구간에 일치(영어소문자)
11.[A-Z] : A부터 Z사이의 문자 구간에 일치(영어 대문자)
12.[0-9] : 0부터 9사이의 문자 구간에 일치
13.[가-힣] : 가부터 힣 사이의 문자 구간에 일치
한글이 들어간거를 다 찾아라.
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
https://localhost:2332
동해물과 백두산이 마르고 닳도록
`
console.log(str.match(/[가-힣]{1,}/g))
결과 :
14. \w : 63개 문자
15. \b : 63개 문자에 일치하지 않는 문자 경계
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
https://localhost:2332
동해물과 백두산이 마르고 닳도록
`
console.log(str.match(/\bf\w{1,}\b/g)) //f로 시작하는 모든 단어를 찾아라
16. \d : 숫자에 일치
17. \s : 공백에 일치
18. (?=) : 앞쪽일치
예제)
골뱅이 앞의 아이디만 출력해줘라.
const str = `
010-2132-2323
thejf@naver.com
The quick brown fox jumps over the lazy dog.
abbcccdddd
https://localhost:2332
동해물과 백두산이 마르고 닳도록
`
console.log(str.match(/.{1,}(?=@)/g))
