[ JavaScript / 정규표현식 ] 자바스크립트 정규표현식 정리 <2>

 

1편 참고

[ JavaScript / 정규표현식 ] 자바스크립트 정규표현식 정리 <1>

 

 

 

정규표현식 1편에서는 MDN에서 설명하는 정규표현식에 대해 알아보았다.

2편에서는 실제 사용 방법 및 활용법에 대해 정리해 보려고 한다.

 

 

 

정규표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어로 자바스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다.

* 자바스크립트는 펄(Perl)의 정규 표현식 문법을 ES3부터 도입했다.

 

 

 

정규 표현식을 생성할 때는 정규표현식 리터럴과 RegExp 생성자 함수를 이용할 수 있는데, 일반적으로는 정규 표현식 리터럴을 사용한다.

정규 표현식 리터럴은 아래와 같이 표현한다.

/pattern/i

/ : 시작기호

pattern : 패턴

/ : 종료 기호

i : 플래그(flag)

 

 

 

 

 예시

const text = 'Hi, My name is...';

// 패턴: is
// 플래그: i => 대소문자를 구별하지 않고 검색한다.
const regexp = /is/i;

regexp.test(text); // true

 

 

 

 

플래그

패턴과 함께 정규 표현식을 구성하는 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다. 

플래그	의미	설명
i	Ignore case	대소문자를 구별하지 않고 패턴을 검색한다.
g	Global	대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역으로 탐색한다.
m	Multi line	문자열의 행이 바뀌더라도 패턴 검색을 계속한다.
d	Has Indices	부분 문자열 일치에 대해 인덱스를 생성.
s	Dot All	개행 문자가 .과 일치한다. (.이 줄 바꿈에 일치하는지 여부를 나타낸다.)
u	Unicode	패턴을 유니코드 코드 포인트의 시퀀스로 간주한다.
y	Sticky	접착 탐색. 대상 문자열의 현재 위치에서 탐색을 시작한다. (검색이 접착 되어있는지 나타낸다.)

 

 

 

 

예제 - MDN

// 전화번호 형식에 맞는 정규 표현식 생성
// xxx-xxxx-xxxx (숫자)

const form = document.querySelector('#form')
const input = document.querySelector('#phone')
const output = document.querySelector('#output')

const re = /^(?:\d{3}|\(\d{3}\))([-\/\.])\d{4}\1\d{4}$/

function testInfo(phoneInput) {
  const ok = re.exec(phoneInput.value)

  if (!ok) {
    output.textContent = `형식에 맞지 않는 전화번호입니다. (${phoneInput.value})`
  } else {
    output.textContent = `감사합니다. 전화번호는 ${ok[0]} 입니다.`
  }
}

form.addEventListener('submit', (event) => {
  event.preventDefault()
  testInfo(input)
})

 

 

 

 

 

 

 

참고)

모던 자바스크립트 Deep Dive - 이웅모 (위키북스)

MDN RegExp