이전 포스팅 에선 JavaScript 정규표현식(또는 정규식) 기초에 대해 다뤄 보았다.
이번 포스팅 에선 정규표현식을 사용해 식에 맞는 결과를 리턴 하는 JavaScript 메소드들 중에서도 간략하게 사용할 수 있는 .test() 와 .match() 메소드에 대해 다뤄보려 한다.
.test() – 정규식 패턴 일치 여부 확인
test 메소드는 정규식에 사용 가능한 기본적인 메소드다. 작성한 정규식에 일치하는 값이 존재하면 true 를, 없으면 false 를 리턴한다.
다음 코드는 test 메소드를 이용한 문자열에 ‘hello’ 가 존재하는지 확인하는 코드다.
const boolean = /hello/.test('hello world');
console.log(boolean); //true
이렇게 단순하게 하나의 단어가 존재하는지 정도를 확인 하기 위해 사용하기엔 조건문을 이용하면 된다. 그런데, 정규식을 다룰 줄 안다면 좀 더 다양한 형태의 값 확인 코드를 작성할 수 있다.
예를 들어, 변수 내의 값이 여러 개 중 하나에 해당 하는지 확인하기 위해 사용해 볼 수 있다. 이를 if(조건문) 를 이용 하여 코드를 작성하게 되면 여러 개의 or 를 사용해야 한다.
다음 코드는 if 문을 이용해 변수의 값이 hello, world 둘 중 하나 인지를 확인한다.
const str1 = 'hello';
const str2 = 'world';
const str3 = 'world2';
let boolean1 = false;
if (str1 === 'hello' || str1 === 'world') {
boolean1 = true;
}
let boolean2 = false;
if (str2 === 'hello' || str2 === 'world') {
boolean2 = true;
}
let boolean3 = false;
if (str3 === 'hello' || str3 === 'world') {
boolean3 = true;
}
console.log(boolean1, boolean2, boolean3);
이를 정규식을 이용해 좀 더 간결하게 만들 수 있다.
const str1 = 'hello';
const str2 = 'world';
const str3 = 'world2';
const boolean1 = /^(hello|world)$/.test(str1);
const boolean2 = /^(hello|world)$/.test(str2);
const boolean3 = /^(hello|world)$/.test(str3);
console.log(boolean1, boolean2, boolean3);
위의 정규식은 ^는 문자열의 시작을, $는 문자열의 끝을 의미한다. 괄호는 값의 묶음으로 | 는 or 와 비슷하게 단어를 구분할 때 사용한다. 따라서, | 로 나뉜 hello 와 world 가 포함이 아닌, 시작과 끝으로 정확하게 일치할 경우만 표시 한다.
^와 $가 없으면 world2 도 world 단어 가 포함되어 true 를 반환 하므로, 정확한 값 체크가 필요할 땐 꼭 사용해 주자.
.match() – 정규식에 일치하는 값 추출
match 메소드는 정규식 대상 값과 정규식에 따른 결과 값이 배열로 담기게 되는 메소드다.
이는 이전 포스트(JavaScript 정규표현식 기초:이론과 사용 방법 및 예제)에서 abcd 문자열에 a와 d 사이에 오는 모든 문자를 추출하는 정규식을 구현할 때 다뤄 보았다.
/a(.*?)d/ 은 a와 d 사이에 오는 문자를 추출하는 메소드다.
const str = 'abcd';
const regex = /a(.*?)d/;
const match = str.match(regex);
console.log(match);이렇게 가져오면 배열 0번째 자리엔 abcd가 오고 1번째 자리엔 bc 가 온다.
.test() 메소드는 단순히 정규식 내용에 맞는 값인지 true, false 만 가져온다면 이 메소드는 값을 추출해 사용할 수 있다. 나의 경우 특정 양식이 있는 textarea 내의 여러 줄 문장에서 양식에 값이 입력되어 있는지 확인할 때 해당 메소드를 활용했다.
예를 들어 다음과 같은 양식이 있다.
<textarea>
1. 이름:
2. 학교:
3. 자기소개:
</textarea>
이 양식을 수정하지 않고 이름, 학교, 자기소개를 입력했는지 확인하기 위해 다음과 같은 코드를 작성해 볼 수 있다. 이름에 홍길동을 입력해 보겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea>
1. 이름:홍길동
2. 학교:
3. 자기소개:
</textarea>
<script>
const textareaContent = document.querySelector('textarea').value;
console.log(textareaContent);
const form1 = textareaContent.match(/1\. 이름:(.*?)\n/);
const form2 = textareaContent.match(/2\. 학교:(.*?)\n/);
const form3 = textareaContent.match(/3\. 자기소개:(.*?)\n/);
console.log(form1, form2, form3);
if(form1 && form2 && form3){
console.log('양식에 변경이 없습니다.');
}else{
console.log('양식이 변경 되었습니다.');
}
if(form1[1]) console.log('첫 번째 양식에 ' + form1[1] + ' 값이 입력 되었습니다.');
if(form2[1]) console.log('두 번째 양식에 ' + form2[1] + ' 값이 입력 되었습니다.');
if(form3[1]) console.log('세 번째 양식에 ' + form3[1] + ' 값이 입력 되었습니다.');
</script>
</body>
</html>
/1\. 이름:(.*?)\n/ 정규식은 위의 abcd 와 같이 1. 이름 과 줄 바꿈(\n) 까지 의 .match() 메소드를 이용해 추출 하는데 (정확한 내용은 JavaScript 정규표현식 기초:이론과 사용 방법 및 예제 참고) 담긴 form1 배열의 0 번째 자리엔, 정규식에 따라 검토하는 문장 (1.이름 ~ 줄 바꿈 까지), 1 번째 자리엔 정규식으로 추출한 사이 문자가 담긴다. 이 경우엔 홍길동이 담겼다.
이렇게, 양식을 그대로 이용했는지 와 양식에 입력된 값을 추출할 수 있다. 이를 응용하면 맞춤법 검사 프로그램, 키워드 강조 프로그램 또한 만들어 볼 수 있을 것으로 보인다.
