[JavaScript] RegExp, 정규표현식

Posted May 31, 2023 Updated Dec 30, 2025

By songmiok

15 min read

RegExp, 정규 표현식이란?

정규표현식은 문자를 검색하거나 대체하거나 추출하는 패턴이다.
정규표현식을 만드는 방법은 생성자 방식과 리터럴 방식이 있다.

JavaScript에서 사용하기

생성자 방식

  
// new RegExp('표현', '옵션')
new RegExp('[a-z]', 'gi')

생성자 방식은 RegExp 클래스를 사용하여 정규식을 만드는 방식으로, 표현과 옵션을 통해 문자 검색이 가능하다.

리터럴 방식

  
// /표현/옵션
/[a-z]/gi

리터럴 방식은 / 와 / 사이에 표현이 들어가고 두 번째 / 뒤에 옵션을 추가하여 정규식을 만드는 방식이다.
많은 경우 리터럴 방식을 사용하지만 간혹 생성자 방식을 사용해야 하는 패턴도 존재한다.

HTML에서 사용하기

input 태그의 pattern 속성

  
<input pattern="정규표현식">

HTML5에서 새롭게 추가된 속성이다.
<input> 태그의 pattern 속성은 폼 제출 시 <input> 요소의 값을 검사할 때 사용될 정규 표현식(regular expression)을 명시한다.
이때 전역 속성인 title 속성을 사용하여 정규 표현식에 간단한 설명을 추가함으로써 사용자가 정확한 값을 입력할 수 있도록 도움을 줄 수 있다.
보안상 예상치 않은 데이터 입력을 완전하게 컨트롤 하기 위해서는 최종적으로 서버사이드 스크립트에서 처리해 주어야 한다.
pattern 속성이 제대로 동작하는 <input>요소의 type 속성값은 다음과 같다.
- date, email, password, search, tel, text, url

정규 표현식 패턴 작성하기

출처: https://hamait.tistory.com/342

Meta문자

정규 표현식의 용어들정규 표현식에서 사용되는 기호를 Meta문자라고 표현한다. 표현식에서 내부적으로 특정 의미를 가지는 문자를 말하며 간단하게 정리하면 아래의 표와 같다.

표현식	의미
`^x`	문자열의 시작을 표현하며 x 문자로 시작됨을 의미한다.
`x$`	문자열의 종료를 표현하며 x 문자로 종료됨을 의미한다.
`.x`	임의의 한 문자의 자리수를 표현하며 문자열이 x 로 끝난다는 것을 의미한다.
`x+`	반복을 표현하며 x 문자가 한번 이상 반복됨을 의미한다.
`x?`	존재여부를 표현하며 x 문자가 존재할 수도, 존재하지 않을 수도 있음을 의미한다.
`x*`	반복여부를 표현하며 x 문자가 0번 또는 그 이상 반복됨을 의미한다.
`x\\|y`	or 를 표현하며 x 또는 y 문자가 존재함을 의미한다.
`(x)`	그룹을 표현하며 x 를 그룹으로 처리함을 의미한다.
`(x)(y)`	그룹들의 집합을 표현하며 앞에서 부터 순서대로 번호를 부여하여 관리하고 x, y 는 각 그룹의 데이터로 관리된다.
`(x)(?:y)`	그룹들의 집합에 대한 예외를 표현하며 그룹 집합으로 관리되지 않음을 의미한다.
`x{n}`	반복을 표현하며 x 문자가 n번 반복됨을 의미한다.
`x{n,}`	반복을 표현하며 x 문자가 n번 이상 반복됨을 의미한다.
`x{n,m}`	반복을 표현하며 x 문자가 최소 n번 이상 최대 m 번 이하로 반복됨을 의미한다.

좀 더 특별한 용도로 사용되는 것들

Meta 문자들 중에서 좀 더 특수하게 사용되는 문자들이 존재한다. ‘[]’ 는 내부에 지정된 문자열의 범위 중에서 한 문자만을 선택하다는 특수한 의미를 가진다. 그리고 내부에서 Meta문자를 사용하면 다른 의미를 가지고 동작할 수 있으므로 잘 확인하고 사용해야 한다. 좀 더 특별한 용도로 사용되는 것들은 아래의 표와 같다.

표현식	의미
`[xy]`	문자 선택을 표현하며 x 와 y 중에 하나를 의미한다.
`[^xy]`	not 을 표현하며 x 및 y 를 제외한 문자를 의미한다.
`[x-z]`	range를 표현하며 x ~ z 사이의 문자를 의미한다.
`\^`	escape 를 표현하며 ^ 를 문자로 사용함을 의미한다.
`\b`	word boundary를 표현하며 문자와 공백사이의 문자를 의미한다.
`\B`	non word boundary를 표현하며 문자와 공백사이가 아닌 문자를 의미한다.
`\d`	digit 를 표현하며 숫자를 의미한다.
`\D`	non digit 를 표현하며 숫자가 아닌 것을 의미한다.
`\s`	space 를 표현하며 공백 문자를 의미한다.
`\S`	non space를 표현하며 공백 문자가 아닌 것을 의미한다.
`\t`	tab 을 표현하며 탭 문자를 의미한다.
`\v`	vertical tab을 표현하며 수직 탭(?) 문자를 의미한다.
`\w`	word 를 표현하며 알파벳 + 숫자 + _ 중의 한 문자임을 의미한다.
`\W`	non word를 표현하며 알파벳 + 숫자 + _ 가 아닌 문자를 의미한다.

Flag

정규표현식을 사용할 때 Flag 라는 것이 존재하는데 Flag를 사용하지 않으면 문자열에 대해서 검색을 한번만 처리하고 종료하게 된다. Flag는 다음과 같은 것들이 존재한다.

Flag	의미
`g`	Global 의 표현하며 대상 문자열내에 모든 패턴들을 검색하는 것을 의미한다.
`i`	Ignore case 를 표현하며 대상 문자열에 대해서 대/소문자를 식별하지 않는 것을 의미한다.
`m`	Multi line을 표현하며 대상 문자열이 다중 라인의 문자열인 경우에도 검색하는 것을 의미한다.

사용 예제

개별 숫자
- /[0-9]/g
  - 전체에서 0~9사이에 아무 숫자 ‘하나’ 찾음
- /[to]/g
  - 전체에서 t 혹은 o 를 모두 찾음
단어
- /filter/g
  - 전체에서 f 따로 i 따로 찾는게 아니라 ‘filter’ 라는 단어에 매칭되는것을 찾음
단어 제외
- /\b(?:(?!to)\w)+\b/g
  - 전체에서 ‘to’ 라는 단어를 빼고 다른 단어 매칭
  - 확인결과 “Tutorial” 도 제외 됨
- \b(?!\bto\b)\w+\b
  - 전체에서 ‘to’ 라는 단어를 빼고 다른 단어 매칭
  - 확인결과 “Tutorial” 는 제외 안됨. 이게 더 정확하다고 볼 수 있을 듯.
이메일
- /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
  - ^[0-9a-zA-Z]
    - 숫자(0~9) 또는 영문자(a-z, A-Z)로 시작
  - ([-_\.]?[0-9a-zA-Z])*
    - 이메일 아이디 부분
    - - _ . 중 하나가 있을 수도 있고 없을 수도 있으며
    - 그 뒤에 숫자 또는 영문자 1개가 오는 패턴 0번 이상 반복
  - @
    - 아이디와 이메일을 구분하는 @ 문자가 반드시 1개 존재
  - [0-9a-zA-Z]
    - 도메인은 숫자 또는 영문자 1개로 시작
  - ([-_\.]?[0-9a-zA-Z])*
    - 도메인 이름 부분
    - - _ . 중 하나가 있을 수도 있고 없을 수도 있으며
    - 그 뒤에 숫자 또는 영문자 1개가 오는 패턴이 0번 이상 반복
  - \.
    - 최상위 도메인 앞의 점(.)이 반드시 존재
  - [a-zA-Z]{2,3}$
    - 최상위 도메인이 영문자 2자 또는 3자로 끝남
    - 예: com, net, kr
  - i: 전체 정규식에서 대소문자를 구분하지 않음
전화번호
- /^\d{3}-\d{3,4}-\d{4}$/
  - ^\d{3}: 시작을 숫자 3개로하며, 그 후에 하이픈 하나 존재
  - \d{3,4}: 숫자가 3~4개 존재하며, 그 후에 하이픈 하나 존재
  - \d{4}$: 숫자 4개로 끝남
핸드폰 번호
- /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/
  - ^01([0|1|6|7|8|9]?)
    - 숫자 01로 시작하며, 그 뒤에 0,1,6,7,8,9 중 하나가 올수도 있고 안 올 수도 있음
  - -?
    - 하이픈(-) 하나 존재할 수도 있고 생략될 수도 있음
  - ([0-9]{3,4})
    - 숫자 3자리 또는 4자리 연속으로 옴
  - -?
    - 다시 하이픈(-)이 하나 존재할 수도 있고 생략될 수도 있음
  - ([0-9]{4})$
    - 숫자 4자리로 끝남
URL
- ^(https?):\/\/([^:\/\s]+)(:([^\/]*))?((\/[^\s/\/]+)*)?\/?([^#\s\?]*)(\?([^#\s]*))?(#(\w*))?$
  - ^: 문자열의 시작
  - (https?)
    - http또는 https 프로토콜
    - s? 로 인해 https의 s는 선택 사항
  - :\/\/
    - 프로토콜 뒤에 만드시 오는 ://
  - ([^:\/\s]+)
    - 호스트명(domain) 부분
    - : / 공백을 제외한 문자 1개 이상
    - 예: example.com, localhost
  - (:([^\/]*))?
    - 포트 번호 전체가 선택 사항
    - :뒤에 /를 제외한 문자 0개 이상
    - 예: :80, :3000
  - ((\/[^\s/\/]+)*)?
    - 경로(path) 부분 전체가 선택 사항
    - / 로 시작하며 공백과 / 를 제외한 문자 1개 이상
    - 여러 경로 세그먼트를 허용
    - 예: /users/123/profile
  - \/?
    - 경로의 끝에 슬래시 / 가 있어도 되고 없어도 됨
  - ([^#\s\?]*)
    - 파일명 또는 마지막 경로 조각
    - #, ?, 공백을 제외한 문자 0개 이상
    - 예: index.html
  - (\?([^#\s]*))?
    - 쿼리 스트링 전체가 선택 사항
    - ? 뒤에 # 과 공백을 제외한 문자들
    - 예: ?page=1&size=10
  - (#(\w*))?
    - 해시(fragment) 전체가 선택 사항
    - # 뒤에 영문자, 숫자, 언더스코어 \w
    - 예: #section1
  - $: 문자열의 끝

자주 사용하는 정규표현식

숫자만

  
/\d*/
/^[0-9]+$/

숫자 천 단위마다 콤마(,) 찍기

  
/\B(?=(\d{3})+(?!\d))/g

핸드폰 번호

  
/^\d{3}-\d{3,4}-\d{4}$/

일반 전화번호

  
/^\d{2,3}-\d{3,4}-\d{4}$/

영문 대소문자만

  
/^[a-zA-Z]+$/

영문 대소문자만 (띄어쓰기 및 공백 가능)

  
/^[a-zA-Z\s]+$/

영문 소문자, 숫자, 언더바(_) 6~50자

  
/^([a-z0-9_]){6,50}$/

숫자, 영문, 대소문자만

  
/^[a-zA-Z0-9]+$/

영문 대소문자, 숫자, 특수문자를 꼭 포함하여 6~50자

  
/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*()_-+=[]{}~?:;`|/]).{6,50}$/

최소 8자리에서 최대 16자리까지 숫자, 영문, 특수문자 각 1개 이상 포함 (암호 유효성 검사에 유용하다.)

  
/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,16}$/

영문 대소문자, 숫자, 특수문자를 꼭 포함하여 6~50자

  
^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*()_-+=[]{}~?:;`|/]).{6,50}$

특수문자만 입력 방지 (한글이나 한자등 일반적인 문자는 모두 입력 가능)

  
/[^!@#$%^&*()_-+=[]{}~?:;`|/<>'"]+/

세 개의 문자(아무 숫자나 특수문자)를 포함

  
/[A-Za-z]{3}/

숫자·소문자·대문자를 각각 최소 1개 이상 포함하면서 전체 길이가 8자 이상인 문자열만 허용

  
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/

소문자 영문·숫자·일부 특수문자를 사용하는 아이디와, 2~3자의 영문 최상위 도메인을 가진 이메일 형식만 허용

  
/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/

작은따옴표(‘)와 큰따옴표(“)를 제외한 모든 문자로 이루어진 문자열만 허용

  
/^[^'\x22]+$/

http:// 또는 https://로 시작하고 그 뒤에 하나 이상의 문자가 반드시 이어지는 URL만 허용

  
/^https?:\/\/.+$/

참고

JavaScript

This post is licensed under CC BY 4.0 by the author.