[자바스크립트] 정규 표현식 기초

자바스크립트 정규 표현식과 사용방법

 

1. 정규 표현식 만들기

const re = /a/    //a 한글자
const re2 = /abc/  //abc 세글자

정규 표현식은 다음과 같이 슬래시로 패턴을 감싸서 작성

const re = new RegExp('a')  // == /a/
const re2 = new RegExp('abc')  // == /abc/

이는 RegExp 생성자 함수를 사용해서 다음과 같이 표현할 수 있다.
바뀔 수 있는 패턴이나, 사용자 입력과 같이 외부 출처에서 가져오는 패턴의 경우 생성자 함수를 사용하면 좋다.
(Using the constructor function provides runtime compilation of the regular expression)

 

2. 정규 표현식 사용법

1) 단순 패턴

만약 /abc/ 라면 문자열에서 정확한 순서로 "abc"라는 문자의 조합이 있어야 한다.

"Hi, do you know your abc's?" 는 일치
"The latest airplane designs evolved from slabcraft." 도 일치하지만

"Grab crab" 과는 일치하지 않는다.

2) 특수 문자 패턴

① 문자 클래스

문자	의미
[문자]	괄호 안의 문자들 중 하나 /[xyz]/ : x,y,z 중 하나 /[a-d]/ : a,b,c,d 중 하나
[^문자]	괄호 안의 문자를 제외한 것 /[^x-z]/ : x, y, z를 모두 제외한 것을 찾을 때 사용
.	모든 한글자 중 하나 "yes my dear"에서 /.y/를 통해 찾는다면 yes는 y앞에 한글자가 없어서 X my는 y앞에 m이 있어서 O
\d	숫자,  [0-9]와 같다
\D	숫자가 아닌 것,  [^0-9]와 같다
\w	영어 알파벳, 숫자, 언더스코어(_),  [A-Za-z0-9_]와 같다
\W	\w가 아닌 것, [^A-Za-z0-9_]와 같다
\s	공백(space)
\S	공백(space)가 아닌 것
|	OR /x|y/ 이면 x 또는 y

 

② Assertions

문자	의미
^문자 또는 문자열	특정 문자 또는 문자열로 시작
문자 또는 문자열$	특정 문자열로 끝남
\b	단어의 처음/끝 /\bm/은 "moon"에서 찾을 수 있음 /oo\b/는 oo뒤에 n이 오기 때문에 찾을 수 없음
\B	단어의 처음/끝이 아님 /\Bon/ 는 "at noon"에서 찾을 수 있음 /ye\B/ 는 "possibly yesterday"에서 찾을 수 있음

 

③ 옵션

옵션	의미
i	대소문자를 구분하지 않는다 /a/ 이면 "Abcde"를 찾을 수 없고 /a/i 이면 "Abcde"에서 A를 찾을 수 있음
g (global의 약자)	패턴에 해당하는 문자를 전부 찾는다. /a/ 는 "abcda"에서  /a/g 는 "a" 두개를 모두 찾음
ig를 같이 사용	/a/ig는 "Abeagd"에서 A와 a를 모두 찾아줌

 

*정규표현식이 어렵다면 

1) 정규표현식을 시각화 할 수 있는 사이트

Regexper

 

2) 정규 표현식 빌더

RegExr: Learn, Build, & Test RegEx

 

 

3. 정규표현식은 어떨 때 쓰나요?

HTML

<p>
  전화번호를 입력 후 "확인" 버튼을 누르세요.
  <br />
  ###-####-####의 형식으로 입력하세요.
</p>
<form id="form">
  <input id="phone" />
  <button type="submit">확인</button>
</form>
<p id="output"></p>

 

JavaScript

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)
})

 

결과

 

4, 프로그래머스 입문테스트(Lv.0)  모음제거 문제에 적용

문제 설명

영어에선 a, e, i, o, u 다섯 가지 알파벳을 모음으로 분류합니다. 문자열 my_string이 매개변수로 주어질 때 모음을 제거한 문자열을 return하도록 solution 함수를 완성해주세요.

---

제한사항

• my_string은 소문자와 공백으로 이루어져 있습니다.
• 1 ≤ my_string의 길이 ≤ 1,000

---

입출력 예

my_string	result
"bus"	"bs"
"nice to meet you"	"nc t mt y"

 

정답▼(더보기 클릭)

function solution(my_string) {
    return my_string.replace(/[aeiou]/g, '')
}

정규표현식 [] g 를 사용하여 a,e,i,o,u 중 일치하는 모든 문자를 빈 문자 ''로 바꿔준다(replace함수)

 

 

참고 

정규 표현식 - JavaScript | MDN