[카카오테크캠퍼스 선택과정] JavaScript 마스터: 정규표현식

1. 정규표현식(RegExp, Regular Expression)

정규표현식을 사용하여 문자를 검색(search)하거나 대체(replace), 추출(extract)할 수 있다.

1.1. 만들기

      

      

      

    
    

      <javascript />
    
// RegExp

// 생성자
// new RegExp("표현", "플래그")
const regExp1 = new RegExp("the", "gi");

// 리터럴
// /표현/플래그
const regExp2 = /the/gi;

1.2. 메소드

      

      

      

    
    

      <javascript />
    
// 정규식.test(문자열) : 일치 여부 반환
// 문자열.match(정규식) : 일치하는 문자의 배열 반환
// 문자열.replace(정규식, 대체문자) : 일치하는 문자를 대체

const str = `
010-1234-5678
thesecon@gmail.com
Hello world!
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
hello@naver.com
http://localhost:1234
동해물과 백두산이 마르고 닳도록
abbcceddddeeeee
`;

const regExp = /fox/gi;

console.log(regExp.test(str)); // true
console.log(str.match(regExp)); // ["fox"]
console.log(str.replace(regExp, "cat"));

1.3. 플래그

      

      

      

    
    

      <javascript />
    
// g : 모든 문자 일치(global)
// i : 대소문자를 구분하지 않고 일치(ignore case)
// m : 여러 줄 일치(multi line), 줄바꿈된 각각의 줄을 시작과 끝으로 인식

const str = `
010-1234-5678
thesecon@gmail.com
Hello world!
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
hello@naver.com
http://localhost:1234
동해물과 백두산이 마르고 닳도록
abbcceddddeeeee
`;

console.log(str.match(/the/)); // ["the"]
console.log(str.match(/the/g)); // ["the", "the"]
console.log(str.match(/the/gi)); // ["the", "The", "the"]

console.log(str.match(/\.$/gi)); // null
console.log(str.match(/\.$/gim)); // ["."]

1.4. 패턴

      

      

      

    
    

      <javascript />
    
const str = `
010-1234-5678
thesecon@gmail.com
Hello world!
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
hello@naver.com
http://localhost:1234
동해물과 백두산이 마르고 닳도록
abbcceddddeeeee
`;

// ^ab    | 줄 시작에 있는 ab
console.log(str.match(/^h.../gm)); // ['http', 'hell', 'http']

// ab$    | 줄 끝에 있는 ab
console.log(str.match(/\.com$/gm)); // ['.com', '.com']

// .      | 임의의 한 문자
console.log(str.match(/^h./gm)); // ['ht', 'he', 'ht']

// a|b    | a 또는 b
console.log(str.match(/fox|dog/g)); // ['fox', 'dog']

// ab?    | ab 또는 a
console.log(str.match(/https?/g)); // ['https', 'http']

// {3}    | 3개 연속
console.log(str.match(/\d{3}/g)); // ['010', '123', '567', '703', '123']

// {3,}   | 3개 이상 연속
console.log(str.match(/\d{3,}/g)); // ['010', '1234', '5678', '7035', '1234']

// {3,5}  | 3개 이상 5개 이하 연속
console.log(str.match(/\d{3,5}/g)); // ['010', '1234', '5678', '7035', '1234']

// +      | 1회 이상 연속 = {1,}
console.log(str.match(/\d+/g)); // ['010', '1234', '5678', '7035', '60', '1234']

// [abcd] | = a|b|c|d
console.log(str.match(/[foxdog]/g)); // ['o', 'g', 'o', 'o', 'o', 'd', 'o', 'd', 'o', 'f', 'o', 'o', 'f', 'o', 'x', 'o', 'd', 'o', 'g', 'o', 'o', 'o', 'o', 'd', 'd', 'd', 'd']

// [a-z]  | a부터 z사이의 문자 구간
console.log(str.match(/[a-z]+/g)); // ['thesecon', 'gmail', 'com', 'ello', 'world', 'https', 'www', 'omdbapi', 'com', 'apikey', 'c', 'c', 's', 'frozen', 'he', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog', 'hello', 'naver', 'com', 'http', 'localhost', 'abbcceddddeeeee']

// [A-Z]  | A부터 Z사이의 문자 구간
console.log(str.match(/[A-Z]+/g)); // ['H', 'T']
console.log(str.match(/[a-zA-Z]+/g)); // ['thesecon', 'gmail', 'com', 'Hello', 'world', 'https', 'www', 'omdbapi', 'com', 'apikey', 'c', 'c', 's', 'frozen', 'The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog', 'hello', 'naver', 'com', 'http', 'localhost', 'abbcceddddeeeee']

// [0-9]  | 0부터 9사이의 문자 구간
console.log(str.match(/[0-9]+/g)); // ['010', '1234', '5678', '7035', '60', '1234']

// [가-힣] | 가부터 힣사이의 문자 구간
console.log(str.match(/[가-힣]+/g)); // ['동해물과', '백두산이', '마르고', '닳도록']

// \w     | 63개 문자(대소영문 52개 + 숫자 10개 + _)
console.log(str.match(/\w+/g)); // ['010', '1234', '5678', 'thesecon', 'gmail', 'com', 'Hello', 'world', 'https', 'www', 'omdbapi', 'com', 'apikey', '7035c60c', 's', 'frozen', 'The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog', 'hello', 'naver', 'com', 'http', 'localhost', '1234', 'abbcceddddeeeee']

// \b     | 63개 문자가 아닌 문자 경계
console.log(str.match(/\b[0-9]+\b/g)); // ['010', '1234', '5678', '1234']

// \d     | 숫자
console.log(str.match(/\b\d+\b/g)); // ['010', '1234', '5678', '1234']

// \s     | 공백
console.log(str.match(/\s/g)); // ['\n', '\n', '\n', ' ', '\n', '\n', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', '\n', '\n', '\n', ' ', ' ', ' ', '\n', '\n']

// (?:)   | 그룹 지정
console.log(str.match(/https?:\/\/(?:\w+\.?)+\/?/g)); // ['https://www.omdbapi.com/', 'http://localhost']

// (?=)   | 앞쪽(Lookahead)
console.log(str.match(/.+(?=과)/g)); // ['동해물']

// (?<=)  | 뒤쪽(Lookbehind)
console.log(str.match(/(?<=과).+/g)); // [' 백두산이 마르고 닳도록']

// 전화번호 추출
console.log(str.match(/\d{3}-\d{4}-\d{4}/g)); // ['010-1234-5678']

// 이메일 추출
console.log(str.match(/\w+@\w+\.\w+/g)); // ['thesecon@gmail.com', 'hello@naver.com']

이게 다가 아니라는 게 슬프다..

정규식이랑 친해지는 것은 참.. 어렵군..