RegExp 정규표현식
Regular Expression
: 문자열의 패턴을 표현하기 위한 도구
Syntax
/ Pattern / Modifier(Method or Metacharacters)/YouAreTheBest/i // YouAreTheBest = Pattern, 검색될 요소(일반 문자(=리터럴 문자), 메타 문자) // i = Modifier, 검색될 요소의 option설정 (i는, 대소문자 구분없이 매칭하는 flag)
패턴매칭(Pattern Matching)
: 문자열이 정규표현식과 일치(Match)하는지 확인하는 작업을 가리킴.
RegExp 객체의 Method
test 메서드 : 대응되는 문자열이 있는지 없는지 검사
반환값 : true or falseconst reg = /cat/; console.log(reg.test("cats and dogs")); // true console.log(reg.test("Cat")); //falseexec 메서드 : 대응되는 문자열을 검색 후 일치한 문자열을 배열로 반환
대응되는 문자열을 찾지 못했을때 null반환const reg = /Script/; const result = reg.exec("JavaScript") console.log(result[0]); // "Script"반환된 배열의 property
index 프로퍼티 : 가장 처음 일치한 위치가 출력
input 프로퍼티 : 일치한 문자열 출력console.log(result.index); // 4 console.log(result.input); // "JavaScript"
정규식 패턴 작성
이스케이프 시퀀스
: \ 문자로 시작하는 이스케이프 문자는 문자로 표기할 수 없는 특수문자
| 이스케이프 | 설명 |
|---|---|
| 유니코드 문자 | 문자 그 자체를 뜻한다. 단, ^, $, \, ., *, +, ?, ( ), [ ], { }, | 는 제외 |
\0 | Null문자(\u0000) |
\n | 줄바꿈, 개행문자(LF=\u000A) |
\t | 수평 탭 |
\v | 수직 탭(프린터 전용) |
\f | 페이지 나누기(폼 피드): 프린트 전용 |
\r | 복귀(캐리지 리턴) |
\xhh | 16진수 표기법의 ASCII 문자 |
\uhhhh | 16진수 표기법의 유니코드 문자 |
\cX | 제어 문자 |
문자클레스 : [...]
사용 방법 : 문자 집합의 요소가 되는 문자 리터럴을 나열하여 대괄호로 묶어준다.
[abc] // 이 정규표현식은 'a', 'b', 'c' 중 하나와 일치 console.log(/[abc]/.test("apple")); // true [0123456789] // 이 정규표현식은 숫자로 해석될 수 있는 문자 한 개와 일치 console.log(/[0123456789]/.test("10 lovely cats")); // true- (하이픈) : 대괄호 안에서 하이픈을 사용하면 문자의 범위 지정 가능
하이픈은 앞/뒤 문자가 모두 리터럴일때만 범위지정을 뜻하는 문자이다. 범위를 뜻하지 않을 때는 '-'문자 자체를 뜻한다.[a-z] // 전체 소문자 중 문자 한 개 [abcx-z] // [a] [b] [c] [x] [y] [z] 중 문자 한 개 [a-zA-Z0-9] // 모든 알파벳과 숫자 중 문자 한 개 <h[1-6]> // HTML요소의 <h1>~<h6>와 일치
부정 문자 클레스 : [ ^ . . .]
[ ^ . . .]는 문자 클레스인 대괄호 안에 들어 있지 않은 문자와 대응(일치).
즉, [ ^ . . .] 는 [ . . . ] 의 여집합의 문자 한 개와 일치[^0-9] console.log(/[^0-9]/.test("486")); //false대괄호 안의 패턴이 ^로 시작하지 않으면 ^를 문자 자체로 인식한다.
문자 클레스 단축 표기
| 단축코드 | 설명 |
|---|---|
| .(마침표) | 줄 바꿈 문자를 제외한 임의의 문자 한개와 일치 /c.t/ - "cat", "cute" 와 일치, "action", "condition"과 불일치 /c..l/ - "cool and sexy" 와 일치, "cols", "console" 과 불일치 |
\d , \D | \d : 숫자(digit)와 일치\D : 숫자 외의 문자와 일치 ( [ ^ 0123456789 ]의 단축표기) |
\w, \W | \w : 모든 영어 단어 문자(word character)(알파벳, 숫자, 언더스코어)와 일치 ([a-zA-Z0-9_]의 단축표기) \W : 영어 단어 문자가 아닌 문자와 일치 |
\s, \S | \s : 모든 공백(space) 문자(공백, 탭, 줄바꿈)과 일치 console.log(/ \s\w\w\/.exec("JavaScript RegExp")) - [" Re"] 일치console.log(/ \s\w\w/.exec("JavaScriptRegExp")) - null 불일치\S : 공백 문자가 아닌 문자와 일치 |
| 문자클래스 내 이스케이프 | ^, $, \, ., *, +, ?, ( ), [ ], { } 는 정규표현식에서는 특별한 뜻을 갖지만 문자클래스([...])안에서 사용하면 메타 문자로서 기능 읽고 문자 자체를 의미 |
반복패턴 : 반복을 지정하는 문자열
| 표현식 | 설명 |
|---|---|
| {m , n} | x 문자가 최소 n번 이상 최대 m 번 이하로 반복됨을 의미한다. /[a-z] {6,12}/ - 알파벳 소문자가 6자 이상 12자 이하인 문자열과 일치 |
| {n,} | 문자가 n번 이상 반복됨을 의미한다. /[a-z] {6,}/ - 알파벳 소문자가 6자 이상인 문자열과 일치 |
| {n} | 바로 앞 요소를 n번 반복 /x{n}/ - x 문자가 n번 반복됨을 의미한다. /[a-z] {4} \d{3}/ - 알파벳 소문자가 4 자 입력되고 그 뒤에 숫자가 3자 입력되는 문자열과 일치 |
| ? | 0개나 또는 1개의 글자 (최대 한 번 반복) x? - 존재여부를 표현하며 x 문자가 존재할 수도, 존재하지 않을 수도 있음을 의미한다. x가 0개로 존재하지 않거나 1개가 있다면 일치 이외 모두 불일치 /[a-z]{4} \d?/ - 알파벳 소문자가 4자 입력 후 그 뒤에 숫자가 없거나 또는 오직 숫자 1자인 문자열과 일치 |
| + | (최소 한 번 반복) / \s+Tom+\/ // [Tom]의 바로 앞에 공백문자가 최소 한 자 이상 등장하는 문자열과 일치값이 없으면 불일치 x+ - 반복을 표현하며 x 문자가 한번 이상 반복됨을 의미 |
| * | 0개 또는 1개 이상의 글자 (최소 0번 반복) / abc c / 일때 앞의 글자인 c가 없거나 c가 하나이상 여러개 존재하면 대응 console.log(/[a-z]{4} \d*/.test("acss2344")); - 알파벳 소문자가 4자리만 입력되면 true, 이후 숫자 입력되는 것은 옵션 |
| *? | 최소한의 반복 (다시) |
위치기준으로 매칭(앵커)
| 앵커 | 설명 |
|---|---|
| ^ | 문자열의 시작 위치에 패턴을 고정 |
| $ | 문자열의 마지막(종료) 위치에 패턴을 고정 |
\b, \B | \b - 단어의 시작 또는 끝에서 일치하는 항목을 찾는 데 사용\b가 문자 앞에 존재하면 찾는 값으로 시작하는 부분 반환\b가 문자 뒤에 존재하면 찾는 값으로 끝나는 부분 반환>예시 const str = "HELLO, LOOK AT YOU!"; const patt1 = / \bLO/;const result = str.search(patt1); // 7 __ const str = "HELLO, LOOK AT YOU!"; const patt1 = /LO \b/;const result = str.search(patt1); // 3 console.log(/ \bcat\b/.test("저는 cat을 좋아합니다.")); - true \B - \b 와 반대의 결과 |
| (?=pattern), (?!pattern) | 전방 탐색(x(?=y)으로 표기하면 x다음에 y가 나오는 패턴) console.log(/Java(?=Script)/.exec("I like JavaScript")); - ["Java"] console.log(/Java(?=Script)/.exec("I like JavaCoffee")); - null 전방 부정 탐색((x(?!y)라고 표기하면 x다음에 y가 나오지 않는 패턴), 전방탐색의 반대결과 console.log(/Java(?!Script)/.exec("I like JavaScript")); - null console.log(/Java(?!Script)/.exec("I like JavaCoffee")); - ["Java"] 대응값이 없으면 Null출력 |
[\b] : 백스페이스
x|y|z : x,y,z중 하나 선택
정규표현식 Flags
syntax
const rgx = /pattern/flags
플레그 설명 g 전역검색 i 대소문자 구분하지 않음(case-insensitive) m 다중행(multi line)검색
앵커문자^와 $는 각각 행의 시작과 끝이라는 뜻s .에 줄바꿈 문자로 매칭 ?? u 정규표현식 패턴을 유니코드의 포인트의 나열로 취급 y 시작 위치 고정 검색한다.
sticky검색 수행(문자열의 현재위치부터 검색)flags flags 문자열 확인
문자열 메서드
String Method
문자열 검색 : search 메서드
str.search(regexp) 매개변수 :
regexp = 정규 표현식 객체. non-RegExp 객체
obj가 전달되면, 그것은new RegExp(obj)을 이용하여RegExp으로 암묵적으로 변환된다. ................?(다시)
search()메서드는 정규 표현식과 이String객체간에 같은 것을 찾기
위한 검색을 실행한다. 결과값을 못찾았을 경우 -1이 출력된다.- 원본 문자열은 수정하지 않는다.
- 전역 검색(g)를 지원하지 않는다.
문자열 치환 : replace 메서드
const str = 'Twas the night before Xmas...'; const newstr = str.replace(/xmas/i, 'Christmas'); console.log(newstr); // Twas the night before Christmas... const re = /apples/gi; const str = 'Apples are round, and apples are juicy.'; const newstr = str.replace(re, 'oranges'); console.log(newstr); // oranges are round, and oranges are juicy.
대응되는 문자열을 찾아 다른 문자열로 치환하는
String메소드.원본 문자열은 수정하지 않는다.
전역 검색(g) 지원
치환패턴 ($n, $&) / (캡처)
$1 = 첫번째 인자의 첫번째 그룹을 의미
$2 = 첫번째 인자의 두번째 그룹을 의미const pattern = /(\w+)\s(\w+)/; const str = 'John Smith'; const newstr = str.replace(pattern, '$2, $1'); console.log(newstr); // Smith, John문자열 추출 : match 메서드
const str = 'Twas the night before Xmas...'; const pattern = 'mas'; const result = str.match(pattern); console.log(result); // ["mas"]
- 대응되는 문자열을 찾는
RegExp메소드. 정보를 가지고 있는 배열을 반환- 원본 문자열은 수정하지 않는다.
- 전역 검색(g) 지원
- 대응되는 문자열을 찾지 못했다면 null을 반환
문자열 나누기 : split 메서드
syntax
str.split(separator, limit)//첫번째 인수(separator) 로 문자를 넘기는 경우 console.log("172.30.34.24".split(".")) //ip주소를 .으로 분할 // ["172", "20", "51", "56"] 배열로 반환 //인수가 비었을 경우 const str = 'The quick brown fox jumps over the lazy dog.'; // 원본 문자열이 통째로 배열로 반환된다. const strCopy = str.split(); console.log(strCopy); // expected output: Array ["The quick brown fox jumps over the lazy dog."] //빈 문자열인 경우 원본문자열의 문자가 배열로 하나씩 반환된다.
- 첫번째 인수(separator)로 문자열을 분할한 다음 배열로 반환
- 원본 문자열은 수정하지 않는다.
- 전역 검색(g) 지원
- 대응되는 문자열을 찾지 못했다면 null을 반환
- (split의 매개변수 (limit)사용은 익숙해진후 추가정리 )
첫번째 인수(separator)가 정규표현식이고 소괄호로 그룹화한 정규표현식이 들어있을 경우
//캡쳐한 부분 정규 표현식의 값도 반환하는 배열에 담긴다. console.log("1 little,2 little princess".split(/\s*(\d)\s/)); // /\s*(\d)\s/ 해석 : 정수앞에 공백이 없거나 여러칸이고 정수뒤에 공백이면 일치 //["", "1", "little,", "2", "little princess"]반환할 문자열의 개수 제한하기
console.log("1,2,3,4,5".split(/\s*,\s*/,3)) // ["1", "2", "3"]두번째 인수(limit)는 옵션
Ryuwisdom