정규표현식

문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴

정규표현식을 만드는 방법

1.정규식 리터럴("/"로 감싸는 패턴)

스크립트가 불러오는 시점에 컴파일 된다.

var re = /ab+c/;

2.RegExp 객체의 생성자 함수

생성자는 런타임에 컴파일 된다.
정규식의 패턴이 변경될 수 있거나 사용자 입력과 같이 패턴을 가져와야 하는 경우에 사용한다.

var re = new RegExp("ab+c");

정규식의 패턴이 변경될 수 있거나 사용자 입력과 같이 패턴을 가져와야 하는 경우에 사용한다.

플래그

패턴	기능
g	모든 문자 검색 (안 쓰면 매칭되는 첫 문자만 검색)
i	대소문자 구분 안함
m	여러 행의 문자열에 대해 검색

매칭 패턴

패턴	기능
a-zA-Z	영어알파벳(-으로 범위 지정)
ㄱ-ㅎ가-힣	한글 문자(-으로 범위 지정)
0-9	숫자(-으로 범위 지정)
.	모든 문자열
\d	숫자
\D	숫자가 아닌 것
\w	영어 알파벳, 숫자, 언더스코어
\W	/w 가 아닌 것
\s	space 공백
\S	space 공백이 아닌 것
\특수기호	특수기호

검색 패턴

패턴	기능
작대기(ㅣ)	OR
[ ]	괄호안의 문자들 중 하나
[^문자]	괄호안의 문자를 제외한 것
^문자열	특정 문자열로 시작
문자열$	특정 문자열로 끝남
( )	그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌)
(?: 패턴)	그룹 검색
\b	단어의 처음/끝
\B	단어의 처음/끝이 아닌 것

수량 패턴

패턴	기능
?	있거나 없거나
*	있거나 없거나 많거나
+	최소한 하나 이상
{n}	n개
{Min,}	최소 Min개 이상
{Min, Max}	최소 Min개 이상, 최대 Max개 이하

자주 쓰이는 정규 표현식

1. 이메일

const REGEX_EMAIL = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

REGEX_EMAIL.test('playck@naver.com')

2. 숫자

const REGEX_NUMBER = /^\d+$/;

REGEX_NUMBER.test('123')

3. 핸드폰 번호

const REGEX_PHONE_NUMBER = /[0-9]{3}-[0-9]{4}-[0-9]{4}/

REGEX_PHONE_NUMBER.test('010-7750-5428')

4. url에서 특정 문자열 추출

const regex =  /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;

const url = 'https://www.youtu.be/-ZClicWm0zM'
url.match(regex)
const result = url.match(regex)
result[7] // '-ZClicWm0zM'

5. 검색어

const List = ["김종진", "박태웅", "김종엽", "손지훈", "황성연"]
const text = ['종']

const filterData = List.filter( user => {
  const regexp = new RegExp( text, 'ig')
  return user.match( regexp )
})

console.log(filterData) // ["김종진", "김종엽"]

6. 텍스트에서 숫자만 추출

const onSearchNumInMsg = (msg) => {
  const regexp = /[^0-9]/g;
  const result = msg.replace(regexp, "")
  return result
}


const msg = '[Web발신] [SCI평가정보]본인인증번호는 957271입니다. 정확히 입력해주세요.'
onSearchNumInMsg(msg) // 957271

7. HTML을 텍스트로 변환하기

const htmlToString = (html) => {
   return html.replace(
    /<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/gi,'').trim()
}

const html = `
    <section class="main">
        <p>
           정규표현식은 다양한 곳에서 사용할 수 있다. <span>물론 어렵지만</span>
        </p>
    </section>
`

htmlToString(html) // '정규표현식은 다양한 곳에서 사용할 수 있다. 물론 어렵지만'

알고리즘 풀이

카카오 알고리즘 문제 - 신규 아이디 추천

const solution = s => {
  let recommended = s
    .toLowerCase() // 모든 대문자를 소문자로 치환
    .replace(/[^\w-_.]/g, '') // 알파벳 소문자, 숫자, '-', '_', '.' 제외한 모든 문자 제거
    .replace(/\.{2,}/g, '.') // 마침표(.) 2번 이상 연속된 부분 하나의 마침표로 치환
    .replace(/^\.|\.$/g, '') // 마침표(.)가 처음이나 끝에 위치한다면 제거
    .replace(/^$/g, 'a') // id가 빈 문자열이라면 "a" 대입
    .substring(0, 15) // id의 16번째 자리부터 다 제거
    .replace(/\.$/g, ''); // 마침표(.)가 끝에 위차하면 제거

  if (recommended.length <= 2) {
    const ch = recommended[recommended.length - 1];
    while (recommended.length <= 2) {
      recommended += ch;
    }
  }
  // id의 길이가 2자 이하라면, id의 마지막 문자를 id의 길이가 3이 될 때까지 반복해서 끝에 붙임
  
  return recommended;
};

console.log(solution('...!@BaT#*..y.abcdefghijklm'));

이외에도 특정 문자열 치환, 대소문자 변환, 문자 위치 찾기 등 다양하게 활용이 가능하다.

정규표현식 연습 사이트

https://regexr.com/