[정규표현식] javascript에서 정규표현식 사용하기

정규표현식은 문자열을 패턴화한 것으로, 문자열 검색/치환/검사에 사용된다. 아직 정규표현식에 대해 감이 안 잡힌다면 아래 글을 보고 오자!

[정규표현식] 정규표현식(Regular expression) width javascript

 

알아두면 두고두고 쓸모있는 정규표현식을 javascript에서는 어떻게 사용할까?

 

javascript에서 정규표현식을 사용하는 경우는 다음과 같다.

 - RegExp에 정의된 함수를 이용하는 경우 (test, exec)

 - String에 정의된 함수를 이용하는 경우 (match, replace, search, split)

RegExp	exec()	패턴과 일치하는 문자열 하나를 탐색하여 배열로 반환(feat. 캡처링 그룹) (없으면 null)
	test()	패턴과 일치한 문자열이 있는지 여부 반환(true/false)
String	match()	패턴과 일치한 문자열 하나를 담은 배열 반환(feat. 캡처링 그룹) (없으면 null)
	matchAll()	패턴과 일치한 모든 문자열을 담은 이터레이터 반환
	search()	문자열에서 패턴과 일치하는 부분을 탐색하여 일치하는 첫번째 문자열의 인덱스 반환. (없으면 -1)
	replace()	문자열에서 패턴과 일치하는 부분 하나만 바꿔치기
	replaceAll()	문자열에서 패턴과 일치하는 부분 모두 바꿔치기
	split()	패턴과 일치하는 부분을 기준으로 문자열을 쪼갬

 

🎈RegExp exec

문자열에서 패턴과 일치하는 부분을 탐색하여 배열로 반환. feat 캡처링그룹. 없으면 null 반환

 - [RegExp 객체].exec([문자열]) 형태

 - 일치하는 문자열 하나를 배열의 첫번째 인덱스에 넣고, 캡처링 그룹을 그 이후 원소로 포함

   [일치한 문자열,캡처링그룹1,캡처링그룹2,...]

   결과 값 배열은 index와 input, groups 속성을 갖는다.

 - 문자열 내에 패턴과 일치하는 문자열이 여러개이어도, 일치하는 첫번째 값과 인덱스만 반환

const reg = /foo/g;
reg.exec('hi foo you foo~');
//결과값 => ['foo', index: 3, input: 'hi foo you foo~', groups: undefined]
//문자열 내에 패턴과 일치하는 문자열이 여러개이어도, 일치하는 첫번째 값과 인덱스만 반환
reg.exec('hi poo you poo~');//null


//캡처링 그룹 2개 사용 예제
//quick+공백+(brown-캡처링그룹1)+문자/숫자/공백 N개 있을수도 없을 수도 + (jumps-캡처링그룹2) 패턴을 반복하여 대소문자 상관없이 탐색
const reg2 = /quick\s(brown).+?(jumps)/ig;
reg2.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
//결과 값 => (3) ['Quick Brown Fox Jumps', 'Brown', 'Jumps', index: 4, input: 'The Quick Brown Fox Jumps Over The Lazy Dog', groups: undefined]
//[일치한 문자열,캡처링그룹1,캡처링그룹2], 패턴을 4번째 인덱스에서 찾았으므로 index 속성은 4, input은 입력값

 - group 속성은 패턴 내에서 명명된 캡처링 그룹을 이용하는 경우, object 형태로 key값은 명명된 캡처링 그룹 명, value는 캡처링 그룹에 해당하는 문자열이 들어간다.

 

🎈RegExp test

 문자열에서 패턴과 일치하는 부분이 있는지 여부(true/false) 탐색

 - [RegExp 객체].test([문자열]) 형태

/foo/g.test('hi foo you foo~');//true
/poo/g.test('hi foo you foo~');//false

 

🎈String match

문자열에서 패턴과 일치한 문자열 하나를 담은 배열 반환. 없으면 null 반환

 - RegExp의 exec 함수의 결과값과 같은 유형의 결과 반환

   일치하는 문자열 하나를 배열의 첫번째 인덱스에 넣고, 캡처링 그룹을 그 이후 원소로 포함

   [일치한 문자열,캡처링그룹1,캡처링그룹2,...]

 - 플래그에 g 옵션을 주는 경우, 문자열에서 패턴과 일치하는 모든 문자열을 탐색하여 배열로 반환. 이 경우 일치하는 문자열이 몇개인지 알 수 있음

//캡처링 그룹 존재 x
'https://smile-haha.tistory.com'.match(/https?:\/\/\w+-\w+\.tistory.com/);
// 결과 값 => ['https://smile-haha.tistory.com']

//캡처링 그룹 존재 o
'https://smile-haha.tistory.com'.match(/https?:\/\/(\w+)-(\w+)\.tistory.com/);
// 결과 값 => ['https://smile-haha.tistory.com', 'smile', 'haha']

//플래그에 g 옵션, 캡처링 그룹 o
'https://smile-haha.tistory.com/manage'.match(/https?:\/\/(\w+)-(\w+)\.tistory.com/g);
// 결과 값 => ['https://smile-haha.tistory.com']
//캡처링 그룹 있어도 일치하는 문자열만 반환

//플래그에 g 옵션, 캡처링 그룹 x
'사과, 배, 오렌지, 귤, 딸기'.match(/사과|귤/g);//['사과', '귤']
'사과, 배, 오렌지, 귤, 딸기'.match(/파인애플/g);//null

🎈String matchAll

문자열에서 패턴과 일치하는 부분을 탐색하여 이터레이터로 반환

 - 결과값에 next 함수를 호출하여 검색 결과를 순회할 수 있음

 - 이터레이터에서 next 함수를 호출하여 받은 값에는 value와 done이 존재

   value는 RegExp의 exec함수를 호출한 결과값과 같은 형태로 출력됨

   done은 순회가 끝났는지 여부

let it = '사과, 배, 오렌지, 귤, 딸기'.matchAll(/사과|귤/ig);
it.next();//{value: ['사과'], done: false}
it.next();//{value: ['귤'], done: false}
it.next();//{value: undefined, done: true}

 결과값이 이터레이터이기 때문에 다음과 같이 for of에 사용할 수 있음

 

🎈String search

문자열에서 패턴과 일치하는 부분을 탐색하여 일치하는 첫번째 문자열의 인덱스 반환. 없으면 -1 반환

'사과, 배, 오렌지, 귤, 딸기, 사과'.search(/사과/ig);//0

 

🎈String replace

문자열에서 패턴과 일치하는 부분 하나만 바꿔치기

 - 플래그에 g옵션을준다면 replaceAll과 동일하게 동작

'사과, 배, 오렌지, 귤, 딸기, 4과, 사과'.replace(/(사|4)과/,'**');//'**, 배, 오렌지, 귤, 딸기, 4과, 사과'
'사과, 배, 오렌지, 귤, 딸기, 4과, 사과'.replace(/(사|4)과/g,'**');//'**, 배, 오렌지, 귤, 딸기, **, **'

 

🎈String replaceAll

문자열에서 패턴과 일치하는 부분 모두 바꿔치기

 - 플래그에 g옵션을 꼭 넣어줘야 함. 안 넣으면 에러

'apple, pineapple, applemango'.replaceAll(/app.+?\b/g,'🍎');
//결과 값 => '🍎, pine🍎, 🍎mango'

 

🎈String split

패턴과 일치하는 부분을 기준으로 문자열을 쪼갬

'사과, 배, 오렌지, 귤/ 딸기. 4과, 사과'.split(/[,./]/);
// 결과 값 => ['사과', ' 배', ' 오렌지', ' 귤', ' 딸기', ' 4과', ' 사과']

 

📌 총평

exec 함수는 캡처링 그룹을 찾고 싶을 때 사용하려나 싶다. 흠.. 단순히 패턴과 일치하는 문자열이 있는지 여부(true/false)만 알고 싶을 경우에는 test 함수를 사용할 것 같고, 패턴과 일치한 문자열의 개수가 몇 개인지, 어떤 것이 있는지를 알고 싶을 때는 match 함수를 쓸 것 같다..

exec 그동안 사용 안한 이유가 있었네..

test, replace, replaceAll은 정규표현식을 이용해서 많이 사용했는데, split에 정규표현식 넣을 생각은 못했는데 유용한 것 같다. 다음번에 써먹어 봐야징..

match도 사용 안했던 건데, 앞으로 많이 쓸 것 같다.

유익한 공부였다~

 

 

📚참고문헌

Regular expressions - JavaScript | MDN