정규 표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴으로 자바스크립트에서 정규 표현식 또한 객체이다.
1. 정규식 만들기
// 정규식 리터럴
const re = /ab+c/;
// 생성자 함수 호출
const re = new RegExp("ab+c");
생성자 함수 사용 시 정규식이 실행 시점에 컴파일된다. 정규식의 패턴이 변경될 수 있는 경우, 혹은 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우에 생성자 함수를 사용하면 된다.
2. 정규식 패턴 작성하기
정규식 패턴은 /abc/ 같이 단순 문자로 구성될 수도 있고, /ab*c/ 또는 /Chapter (\d+)\.\d*/와 같이 단순문자 + 특수문자의 조합으로 구성될 수 있다.
특수문자의 사용에 대해서는 아래의 참고 url로 이동하여 확인할 것!!!
\
단어 경계 문자를 형성
^
입력의 시작 부분에 대응
$
입력의 끝 부분과 대응
*
앞의 표현식이 0회 이상 연속으로 반복되는 부분과 대응
+
앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응됩니다.
?
앞의 표현식이 0 또는 1회 등장하는 부분과 대응
.
개행문자를 제외한 모든 단일 문자와 대응
(x)
예시 /(foo) (bar) \1 \2/ 안의 (foo)와 (bar)는 'foo bar foo bar'에서 처음의 두 단어에 대응되고 이를 기억한다. 패턴 내부의 \1와 \2는 문자의 마지막 두 단어에 대응한다.
\n 패턴은 앞의 n번째 포획괄호에 대응된 문자열과 똑같은 문자열에 대응(정규식 치환 부분에서는 $1, $2, $n과 같은 문법으로 사용해야함)
\w
[A-Za-z0-9_]
\W
[^A-Za-z0-9_]
\d
[0-9]
\D
[^0-9]
\s
whitespace, carriage return, tabs, form feed, new line characters - [\r\t\f\n\v]
\S
everything except whitespace - [^ \r\t\f\n\v]
/^[a-z][a-z]+\d*$|^[a-z]\d\d+$/i
- ^ - start of input
- [a-z] - first character is a letter
- [a-z]+ - following characters are letters
- \d*$ - input ends with 0 or more digits
- | - or
- ^[a-z] - first character is a letter
- \d\d+ - following characters are 2 or more digits
- $ - end of input
/^[a-z]([0-9]{2,}|[a-z]+\d*)$/i
- ^ - start of input
- [a-z] - first character is a letter
- [0-9]{2,0} - ends with two or more numbers
- | - or
- [a-z]+ - has one or more letters next
- \d* - and ends with zero or more numbers
- $ - end of input
- i - ignore case of input
3. 정규식에 쓰이는 메소드
exec
대응되는 문자열을 찾는 RegExp 메소드로 정보를 가지고 있는 배열을 반환한다. 대응되는 문자열을 찾지 못했다면 null을 반환한다.
test
대응되는 문자열이 있는지 검사하는 RegExp 메소드로 true나 false를 반환한다.
match
대응되는 문자열을 찾는 String 메소드로 정보를 가지고 있는 배열을 반환한다. 대응되는 문자열을 찾지 못했다면 null을 반환한다.
search
대응되는 문자열이 있는지 검사하는 String 메소드로 대응된 부분의 인덱스를 반환한다. 대응되는 문자열을 찾지 못했다면 -1을 반환한다.
replace
대응되는 문자열을 찾아 다른 문자로 치환하는 String 메소드
split
정규식 혹은 문자열로 대상 문자열을 나누어 배열로 반환하는 String 메소드
참고.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions
'javascript' 카테고리의 다른 글
Undefined VS Null (0) | 2022.04.08 |
---|---|
for of VS for in (0) | 2022.03.15 |
아코디언 메뉴 (0) | 2022.02.17 |
페이지 전환 효과 (0) | 2022.02.17 |
ES6. 구조 분해 할당 (0) | 2022.02.07 |