캐럿(caret) 기호 ^
와 달러 기호 $
는 정규식에서 특별한 뜻을 지닙니다. 두 기호를 '앵커(anchor)'라고 합니다.
캐럿 기호 ^
는 텍스트의 시작, 달러 기호 $
는 텍스트의 끝을 나타냅니다.
텍스트가 Mary
로 시작하는지 검사해보죠.
let str1 = "Mary had a little lamb";
alert( /^Mary/.test(str1) ); // true
^Mary
패턴은 "문자열이 시작하고 바로 Mary가 나타난다"라는 뜻입니다.
위와 유사하게 snow$
를 사용해서 문자열이 snow
로 끝나는지 검사할 수 있습니다.
let str1 = "it's fleece was white as snow";
alert( /snow$/.test(str1) ); // true
지금까지 살펴본 예시에서는 앵커를 사용하는 대신 문자열 메서드 startsWith·endsWith
를 사용해도 같은 결과를 얻을 수 있습니다. 정규 표현식은 좀 더 복잡한 검사가 필요할 때 사용하도록 합시다.
완전히 일치하는지 검사하기
두 앵커를 같이 쓰는 ^...$
는 문자열이 패턴과 완전히 일치하는지 확인할 때 자주 사용됩니다. 사용자가 입력한 내용이 올바른 형식으로 되어있는지 확인할 때가 대표적인 예입니다.
문자열이 12:34
형식의 시간인지 확인해봅시다. 즉, 숫자 두 개 뒤에 콜론이 나오고 다시 숫자 두 개가 나오는 형식인지 확인해보는 것입니다.
정규 표현식으로 쓰면 \d\d:\d\d
가 되겠네요.
let goodInput = "12:34";
let badInput = "12:345";
let regexp = /^\d\d:\d\d$/;
alert( regexp.test(goodInput) ); // true
alert( regexp.test(badInput) ); // false
예시에서 \d\d:\d\d
와 일치하는 문자열은 반드시 텍스트의 시작인 ^
바로 다음에 나와야 하고 그 뒤에 바로 텍스트의 끝 $
가 나와야 합니다.
문자열 전체가 이 형식에 정확히 일치해야 합니다. 형식에서 벗어난 문자가 있거나 문자가 더 많으면 결과는 false
입니다.
앵커는 m
플래그가 있을 때는 다르게 동작하는데요. 어떻게 다른지는 다음 글에서 살펴보겠습니다.
앵커 ^
와 $
는 조건을 나타냅니다. 따라서 앵커의 너비는 0입니다.
다시 말해서 앵커는 어떤 문자와 일치하는 것이 아니라 정규식 엔진이 문자열의 시작과 끝이라는 조건을 검사하도록 강제하는 역할을 합니다.
댓글
<code>
태그를, 여러 줄로 구성된 코드를 삽입하고 싶다면<pre>
태그를 이용하세요. 10줄 이상의 코드는 plnkr, JSBin, codepen 등의 샌드박스를 사용하세요.