Coding

코스 전체목록

닫기

정규표현식

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다. 

정규표현식은 하나의 언어라고 할 수 있다. 그러므로 본 수업에서 정규표현식의 모든 것을 다루는 것은 불가능하다. 본 수업은 아래와 같은 전략을 취하고 있다.

  1. 입문자에게 정규표현식이 무엇인가에 대한 개념을 알려준다. 초심자에게는 사용법까지 공부하는 것은 무리다. 나중에 문자를 처리해야하는 상황이 생겼을 때 이곳을 찾아오거나 본 수업을 완주했을 때 마지막 단계로 본 수업을 공부한다.
  2. 정규표현식을 이미 알고 있는 개발자에게는 정규표현식을 자바스크립트에서는 어떻게 사용하는가를 알려준다. 
  3. 정규표현식 자체에 대한 학습이 필요하다면 정규표현식 수업을 공부하자.

정규표현식 생성

정규표현식은 두가지 단계로 이루어진다. 하나는 컴파일(compile) 다른 하나는 실행(execution)이다. 우선 컴파일부터 알아보자.

컴파일

컴파일은 검출하고자 하는 패턴을 만드는 일이다. 우선 정규표현식 객체를 만들어야 한다. 객체를 만드는 방법은 두가지가 있다. a라는 텍스트를 찾아내는 정규표현식을 만들어보자.

정규표현식 리터럴

var pattern = /a/

정규표현식 객체 생성자

var pattern = new RegExp('a');

두가지 모두 같은 결과를 만들지만 각자가 장단점이 있다. 

정규표현식 메소드 실행

정규표현식을 컴파일해서 객체를 만들었다면 이제 문자열에서 원하는 문자를 찾아내야 한다. 

RegExp.exec()

console.log(pattern.exec('abcdef')); // ["a"]

실행결과는 문자열 a를 값으로 하는 배열을 리턴한다.

console.log(pattern.exec('bcdefg')); // null

인자 'bcdef'에는 a가 없기 때문에 null을 리턴한다.

RegExp.test()

test는 인자 안에 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.

console.log(pattern.test('abcdef')); // true
cnosole.log(pattern.test('bcdefg')); // false

문자열 메소드 실행

문자열 객체의 몇몇 메소드는 정규표현식을 사용할 수 있다. 

String.match()

RegExp.exec()와 비슷하다.

console.log('abcdef'.match(pattern)); // ["a"]
console.log('bcdefg'.match(pattern)); // null

String.replace()

문자열에서 패턴을 검색해서 이를 변경한 후에 변경된 값을 리턴한다.

console.log('abcdef'.replace(pattern, 'A'));  // Abcdef

옵션

 정규표현식 패턴을 만들 때 옵션을 설정할 수 있다. 옵션에 따라서 검출되는 데이터가 달라진다.

i

i를 붙이면 대소문자를 구분하지 않느다.

var xi = /a/;
console.log("Abcde".match(xi)); // null
var oi = /a/i;
console.log("Abcde".match(oi)); // ["A"];

g

g를 붙이면 검색된 모든 결과를 리턴한다.

var xg = /a/;
console.log("abcdea".match(xg));
var og = /a/g;
console.log("abcdea".match(og));

사례

캡처

괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 이 때 기호 $를 사용하는데 아래 코드는 coding과 everybody의 순서를 역전시킨다.

var pattern = /(\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1");
console.log(result);

치환

아래 코드는 본문 중의 URL을 링크 html 태그로 교체한다. 

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
	return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);

결과는 아래와 같다.

생활코딩 : <a href="http://opentutorials.org/course/1">http://opentutorials.org/course/1</a> 입니다. 네이버 : <a href="http://naver.com">http://naver.com</a> 입니다. 
 

참고

댓글

댓글 본문
  1. coding_prince
    감사합니다. 좀 더 쉬운 예시면 좋을것 같습니다.
  2. 드림보이
    수강완료했습니다...
  3. 박병진
    정규표현식이 어떤것이고 기초는 무엇인지 잘 배웠습니다. 이고잉 선생님.
  4. yogg
    어렵지만 간단하게 봐서 좋았습니다~~
  5. 앙냥냥
    2021.04.02 ~ 2021.04.04 봐씁니다!! 제대로 알면 여기저기 유용하게 쓰일 것 같아서 더 공부해 보려고욥..
  6. Asanagi
    2021.03.19 완료
  7. 진돌
    2021.03.05 완료
  8. 손보선
    \ 의 경우 특수문자(Escape character) 라서 \\ 로 표현해야 하는군요.

    var pattern = new RegExp('(\\w+)\\s(\\w+)');
  9. 정규표현식 스킵 필요하면 볼 것
  10. 정재진
    완료
  11. 주니어개발자
    잘 배웠습니다!
  12. 정상에 오르자가자고고
    완료
  13. 박병진
    패스 나중에 필요하면 오겠습니다.
  14. 20201012 완료
  15. Yongbeom Kwon
    200913 완료
  16. 준식
    20200606 패스, 정규표현식은 또 보러오겠습니다.
  17. 뿡뿡팡야
    완료
  18. 완료. 정규표현식 사용법까지는 무리네요... 추후에 보러 오겠습니다! 좋은 강의 감사합니다 :)
  19. 한강
    굿모닝~~^^! 200305
  20. moleskindiary@gmail.com
    감사합니다. 정규표현식이란 용어를 보고 두렵게만 생각했는데
    어떤 개념인지 감을 잡았습니다.
  21. galangal
    20.02.04 완료
  22. 현수
    감사합니다
  23. Blanc
    2020.01.10(맛보기)
  24. 굼벵이
    완료
  25. 오현주
    2019-12-17 수강
  26. 2019-10-20 8:32pm 완료
  27. 홍주호
    완료 20191019
  28. 박창신
    완료
  29. yopeule@naver.com
    자바스크립트는 정규표현식이 아주 쓰기 좋게 되어있군요. 기본 기능으로 내장되어있네요. 설명이 좋습니다. 감사합니다.
  30. 행복한유령
    3/7 19-07-31
  31. 초밥왕
    오랜만이군 나 자신
    대화보기
    • 아는척해봤어요
      눈치로 해석한거지만 정확한것은 제대로 수업받아야 겟네유!
      대화보기
      • (?:https?) -> https or http
        즉 s가 빠질수도 들어갈수도 있다는 의미입니다.
      • flex
        (?:https?)에서 (?: )로 논캡쳐로 잡는 이유 아시는분 설명좀 부탁드려요
      • 초밥왕
        무슨말인지 아직은 잘 모르지만 언젠가 알아먹을수있을만큼 공부하겠습니다!!
      • 호두
        감사합니다
      • choon
        감사합니다.
      • moon
        감사합니다!
      • 우니운
        다음엔 좀 더 심도있게 파헤쳐보도록 하겠습니다^^ 좋은 강의 항상 감사드립니다.
      • 생선과고양이
        정규표현식은 패스합니다. 다음에 한번 심도있게 파보겠습니다
      • 안장호
        감사합니다~! ^^
      • 듀티프리
        좋아요. 감사합니다.
      • 실버스노
        /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim

        위 정규식이

        생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다.

        위의 텍스트에서 http://opentutorials.org/course/1http://naver.com 의 부분을 찾는 식이였네요. 빌더에 넣어보시면 나와요!
        빌더에 가셔서 정규식 부분 한글자씩 커서 갖다대면 영어로 설명이 써있어요
        대화보기
        • Seo Yun Seok Tudoistube
          감사합니다.
          /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim 에서 '/\b(?:https?)' 부분에서 하나씩 설명 좀 해주실 수 있으신가요?
          생활코딩의 정규표현식 강좌를 듣고 와도 아직 이해를 잘 못한거 같습니다.
        • 김진홍
          감사합니다~~
        • 박재현
          수강완료.
        • 박인호
          12-11
          수강완료.
          감사합니다.
        • Jupi
          와 진짜 재미있네요!
          js다보고 정규표현식 언능 배우고 싶습니다 ㅎㅎ
        • 최영성
          2017.12.08 여기부터
        • 이병학
          숫자 세개와 숫자가 아닌 것의 조합이면 그 바운다리에 있는 것을 ','로 바꾸어라라고 되는데 어떻게 "," 가 추가 되는 지 작동은 하는데 제가 이해가 되지 않아서요
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기