22일 8월 2020

앵커 ^와 $의 여러 행 모드, 'm' 플래그

m 플래그를 사용하면 여러 행 모드(multiline mode)를 활성화할 수 있습니다.

여러 행 모드는 ^$의 작동 방식에만 영향을 줍니다.

여러 행 모드에서는 두 앵커가 전체 문자열의 처음과 끝뿐 아니라 각 행의 시작과 끝에도 대응합니다.

^로 행 시작 검색하기

아래 예시에 여러 행으로 된 텍스트가 있습니다. \d/gm 패턴으로 각 행이 시작하는 위치에 있는 숫자를 찾을 수 있습니다.

let str = `1st place: Winnie
2nd place: Piglet
3rd place: Eeyore`;

alert( str.match(/^\d/gm) ); // 1, 2, 3

m 플래그 없이 검색하면 맨 앞 숫자만 검색되죠.

let str = `1st place: Winnie
2nd place: Piglet
3rd place: Eeyore`;

alert( str.match(/^\d/g) ); // 1

이렇게 결과가 다른 것은 캐럿 기호 ^가 기본적으로는 텍스트의 시작 위치에만 대응하기 때문입니다. 여러 행 모드를 사용해야 모든 행의 시작 위치와 대응하죠.

주의:

'행 시작’이라는 것은 엄밀히 말해서 '줄 바꿈 직후’를 의미합니다. 여러 행 모드에서 ^을 사용한 검사는 줄 바꿈 문자 \n 바로 뒤 모든 위치와 일치합니다.

텍스트의 시작 위치를 포함해서요.

$로 행 끝 검색하기

달러 기호 $는 캐럿 기호와 비슷하게 동작합니다.

정규 표현식 \d$를 사용하면 행 끝에 있는 숫자를 전부 찾을 수 있습니다.

let str = `Winnie: 1
Piglet: 2
Eeyore: 3`;

alert( str.match(/\d$/gm) ); // 1,2,3

m 플래그가 없으면 달러 기호 $는 전체 텍스트의 끝에만 일치하므로 가장 뒤에 있는 마지막 숫자만 찾게 됩니다.

주의:

'행 끝’이라는 것은 엄밀히 말해서 '줄 바꿈 직전’을 의미합니다. 여러 행 모드에서 $을 사용한 검사는 줄 바꿈 문자 \n 바로 앞의 모든 위치와 일치합니다.

텍스트의 끝 위치를 포함해서요.

^ $ 대신 \n 검색하기

줄 바꿈을 찾을 때는 앵커 ^ $뿐 아니라 줄 바꿈 문자 \n을 사용할 수도 있습니다.

두 방법은 어떤 게 다를까요? 예시를 보죠.

이번에는 \d$ 대신 \d\n을 사용해 검색해봅시다.

let str = `Winnie: 1
Piglet: 2
Eeyore: 3`;

alert( str.match(/\d\n/gm) ); // 1\n,2\n

일치하는 결과가 3개가 아니라 2개인 것을 확인할 수 있습니다.

3 다음에 줄 바꿈이 없기 때문이죠. 텍스트의 끝이기 때문에 $에는 일치하지만요.

차이점이 하나 더 있습니다. 일치 결과에 줄 바꿈 문자 \n이 포함되어있습니다. 앵커 ^ $는 행의 시작·끝이라는 조건만 검사하지만 \n은 문자이기 때문에 결과에 포함됩니다.

따라서 결과에 줄 바꿈 문자가 필요하다면 정규식 패턴에 \n을 사용합니다. 줄 바꿈 문자 없이 행의 시작·끝에 있는 문자만 찾고 싶을 때는 앵커를 사용합니다.

튜토리얼 지도

댓글

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