JavaScript

정규표현식

정규표현식(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. yopeule@naver.com
    자바스크립트는 정규표현식이 아주 쓰기 좋게 되어있군요. 기본 기능으로 내장되어있네요. 설명이 좋습니다. 감사합니다.
  2. 행복한유령
    3/7 19-07-31
  3. 초밥왕
    오랜만이군 나 자신
    대화보기
    • 아는척해봤어요
      눈치로 해석한거지만 정확한것은 제대로 수업받아야 겟네유!
      대화보기
      • 아는척해봤어요
        /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim
        여기서 하나씩 보면 (?:https?) : https or http 둘다 아무거나 찾겠다는거죠
        https://naver.com이나 http://naver.com 이나 둘다 네이버로 들어가는 url이니..

        [a-z0-9-+&@#\/%?=~_|!:,.;]* 이 부분은
        a 부터 z 까지 0부터 9까지 이후는 특수문자를 포함한것도 다 찾겠다는 얘기
        대학생이시라면,,레포트 쓰다 참고 주소 남길때 혹은 구글링했을때 주소창에서 컨트롤 +C하고나서 한글에 컨트롤 +V를 하면 주소가 특수문자가 막 들어가서 길게 나올경우 이런 url까지 잡겠다는 소리인듯 합니다
      • (?:https?) -> https or http
        즉 s가 빠질수도 들어갈수도 있다는 의미입니다.
      • (?:https?)에서 (?: )로 논캡쳐로 잡는 이유 아시는분 설명좀 부탁드려요
      • 초밥왕
        무슨말인지 아직은 잘 모르지만 언젠가 알아먹을수있을만큼 공부하겠습니다!!
      • 호두
        감사합니다
      • 감사합니다.
      • 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 여기부터
        • 이병학
          숫자 세개와 숫자가 아닌 것의 조합이면 그 바운다리에 있는 것을 ','로 바꾸어라라고 되는데 어떻게 "," 가 추가 되는 지 작동은 하는데 제가 이해가 되지 않아서요
        • 이병학
          저는 지금 replace(/\B(?=(\d{3})+(?!\d))/g, ",") 를 보고 있는데요
          해석이 어렵네요.
          혹시 이것 좀 해석해 주실 분 계신가요.
          어떻게 이것이 ,를 추가를 하는 것인지 이해가 통 안되네요ㅣ
        • 이병학
          그러게요.
          제가 찾아 봐도 그렿네요.
          이럴 때가 제일 골치아픈데 말이죠.
          된다는데 나는 하면 안되고 .....
        • Estee
          패턴을 만들어 변수에 담을 때
          1 --- /정규표현식내용/
          2 --- new RegExp('정규표현식내용')
          이렇게 두가지를 쓸 수 있는것 아닌가요?
          저는 예제와 다르게 2번째를 응용해보았는데 신기하게 바뀌질 않아서요
          대화보기
          • 이병학
            저도 지금 패턴과 replace를 공부중인데 어렵네요.
            이해하기가.
            근데 일단 Estee님의 코드를 보면 / 가 빠진 것 같은데요.
            /를 넣고 한 번 해 보세요.
            대화보기
            • Estee
              궁금한게 있는데요 정규표현식 캡처 부분 따라하고 있었는데요
              var pattern = new RegExp('(\w+)\s(\w+)');
              var str = 'coding everybody';
              var result = str.replace(pattern, "$2, $1");
              console.log(result);

              이렇게 패턴을 /(\w+)\s(\w+)/;
              이것대신에 new RegExp 를 쓰면 결과 값이 바뀌질 않고
              'coding everybody'가 나오는데 이유를 아시나요?
            • 수복
              감사합니다.
            • GoldPenguin
              완료했습니다.
            • 감사합니다.
              日日新又日新~!!
            • 아이노바
              가슴으로 말합니다. 너무 감사합니다.
            • sealwind
              var str = "간장 공장 공장장은 강 공장장이고 된장 공장 공장장";
              var pattern = /장/g;
              var jang_count = 0;
              var result = str.replace(pattern,function(jang){
              document.write(jang+ "을 정으로 바꿨어요 <br />");
              jang_count += 1;
              return "정";
              })
              document.write("총" + jang_count + "회 변경되었습니다<br />");
              document.write(result+"<br />");
              동작이 되게 하려고 이리저리 고민하다보니 이번 과정을 좀 더 정확하게 이해할 수 있게 되었습니다.
              대화보기
              • Seo Yun Seok Tudoistube
                정규표현식... 외면하기엔 너무 아깝고, 가까이하기엔 너무 어려운데 시각화와 빌더 소개해주셔서 감사합니다^_____^!!!
              • naamoonoo
                감사합니다 잘 배우고 있습니다!

                질문이 있는데 영상에서 보면 atom에서 자바스크립트 코드를 작성하고, 결과를 바로 크롬(?)에서 보시는 거 같은데

                이건 어떻게 해야하나요?

                이고잉님의 방법말고도 atom에서 바로 자바스크립트 코드를 실행해볼 수 있는 방법을 알려주시면 감사하겠습니다
              • Gangso Lee
                오리엔테이션과 패턴만들기까지 보았음 정규표현식은 잘 몰라서 스킵_
              • 리느
                감사합니더~
              • 최규선
                20170425 완료. 감사합니다.
              • BearCola
                긴 신호 문자열을 58개 단위로 바꿔서 Return 하는 것을 아래와 같이 설정했는데요.
                혹시 58 이란 부분에 변수가 들어가서 실행할 수 있는 방법은 없을까요?
                (변수를 넣어보니 동작이 되질 않네요 ㅠㅜ)

                completedSignal.match(/(.|[\r\n]){1,58}/g);
              • 신입1
                감사합니다.
              • 이승우
                20170410 완료
              • 전성욱
                함수는 function 함수명(){}로 선언해서 다른 로직에서 함수명();으로 호출하는 함수가 있는 반면에
                Function(){}와 같이 선언 및 호출없이 바로 실행하는 함수가 있습니다. 재사용할 필요가 없는 단발성 함수지만 꼭 함수로 선언해서 사용해야 할때 주로 사용합니다.

                알기쉽게 예를 들자면,

                var str = "간장 공장 공장장은 강 공장장이고 된장 공장 공장장";
                var reg = /장/g;
                jang = 0
                str = str.replace(reg,function(jang){
                jang++;
                alert(jang+ "을 정으로 바꿨어요");
                return "정";
                }
                alert("총" + jang + "회 변경되었습니다");

                이렇게 응용하는것도 가능합니다
                대화보기
                • shyeon1212
                  /(\w*)(\W)(\d*\.\d*\.\d)(\.\w*)/g
                  이런 정규식을 만들어서 사용중인데요.
                  저렇게되면 1개가 아닌 여러개가 검색이 되는데
                  정규식 자체내에 변수를 넣어서
                  변수를 입력받아 사용할 수 있는 방법은 없나요.?
                • a75819696
                  정규표현식 옵션 사용할때 var a=/a/g; 이런식으로 말고 RegExp로 생성할 때는 어떻게 옵션 사용하나요?
                • Ruin09
                  정규표현식... 정말 중요하죠. 정규표현식을 이렇게 상세하게 들을 수 있는데다 특강도 있다니 정말 좋네요.
                • 폭스킴
                  정규표현식 옵션에서 i 는 insensitive, g는 global의 약자
                • 감자
                  재밌네요. 끝까지 완주할 수 있도록 노력해야겠네요. 고맙습니다.^^
                • 김명수
                  재밌네요 오늘은 여기까지하고 내일 또 정주행으로 끝내야지!
                • enleaf
                  재밋게 배우고 있습니다 ^^
                  따라 하다가 오탈자가 있어서 남깁니다~

                  RegExp.test()
                  cnosole.log(pattern.test('bcdefg')); // false

                  cnosole.log -> console.log
                • 완료!
                  감사합니다. 완료!
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기