2020년 6월 15일

앵커: 문자열의 시작 ^과 끝 $

캐럿(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’

앵커 ^$는 조건을 나타냅니다. 따라서 앵커의 너비는 0입니다.

다시 말해서 앵커는 어떤 문자와 일치하는 것이 아니라 정규식 엔진이 문자열의 시작과 끝이라는 조건을 검사하도록 강제하는 역할을 합니다.

과제

^$와 일치하는 문자열은 어떤 문자열일까요?

유일하게 일치하는 문자열은 빈 문자열입니다. 시작하자마자 바로 끝나는 문자열이죠.

이번 과제로 다시 한번 앵커는 문자가 아니라 조건을 표현한다는 것을 알 수 있습니다.

여기 빈 문자열 ""이 있습니다. 정규식 엔진은 먼저 입력의 시작 ^를 확인합니다. 문자열이 시작했네요. 그리고 바로 입력의 끝 $를 확인합니다. 끝도 바로 있네요. 그래서 결과는 일치입니다.

튜토리얼 지도

댓글

댓글을 달기 전에 마우스를 올렸을 때 나타나는 글을 먼저 읽어주세요.
  • 추가 코멘트, 질문 및 답변을 자유롭게 남겨주세요. 개선해야 할 것이 있다면 댓글 대신 이슈를 만들어주세요.
  • 잘 이해되지 않는 부분은 구체적으로 언급해주세요.
  • 댓글에 한 줄짜리 코드를 삽입하고 싶다면 <code> 태그를, 여러 줄로 구성된 코드를 삽입하고 싶다면 <pre> 태그를 이용하세요. 10줄 이상의 코드는 plnkr, JSBin, codepen 등의 샌드박스를 사용하세요.