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. 감자
    재밌네요. 끝까지 완주할 수 있도록 노력해야겠네요. 고맙습니다.^^
  2. 김명수
    재밌네요 오늘은 여기까지하고 내일 또 정주행으로 끝내야지!
  3. enleaf
    재밋게 배우고 있습니다 ^^
    따라 하다가 오탈자가 있어서 남깁니다~

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

    cnosole.log -> console.log
  4. 완료!
    감사합니다. 완료!
  5. Chizcake
    도움이 많이 되었습니다!
    항상 감사합니다.
  6. 감사합니다
  7. 김은희
    정규표현식! 재미있어보이는데...어떻게 해야 정규표현식과 친해질 수 있을까요? ^^;;
  8. yihsang
    감사합니다.
  9. JustStudy
    고맙습니다
  10. 뚜뚜뚜
    안녕하세요.
    함수부분을 들었는데도, 같은 내용이 이해가 잘 안가서요 ㅠ

    function(url){
    return '<a href="'+url+'">'+url+'</a>';
    }

    여기서 보통
    function 함수명(변수)
    이런식으로 함수가 들어가야하는거 아닌가요?
    function(url){함수내용} 이 내용과,
    new function func1(url){함수내용} 이게 같은 뜻인가요?
    url 이라는 변수가 따로 정의되지 않았는데 값으로 들어가니 헷갈리네요.
    $를 사용해서 들어가는 것도 아니구ㅠ

    '그건 자바스크립트가 저 함수를 호출 할 때 url 값을 인자로 전달하도록 '약속'되어 있는거예요'

    이 내용이 이해가 잘 안되는데 자세하게 설명해주실수 있나요 ㅠ??
    대화보기
    • 정말 감사합니다~! 진짜 생활코딩 강의는 기본기 잡는데 최고인 것 같아요!
    • SK Kim
      치환 부분에서 함수 부분이 이해가 안가서 아는 방법으로 했더니 링크 및 텍스트가 undefined으로 나오더군요.
      function atag (url){
      return ('<a href="' + url + '">' + url + '</a>');
      }
      var result = content.replace(urlPattern, atag());
      함수를 ()없이 atag으로 하니 정상적으로 작동...음...
    • 박고잉
      훌강 감사
      와 맨날 C언어로 문자하나하나 파싱 알고리즘 짜느라 머리 싸맷는데 이렇게 좋은게 있었다니 꿀강 감사합니다
      C++라이브러리에도 정규식 라이브러리가 있으니 무척 도움이 되겠어요
    • coding
      강의를 안듣고 한 질문이네요
      대화보기
      • 영어는쉽다
        난 봐도 모르겠다. 프로그래밍 기초가 부족하다. ㅠㅠ
      • 강집사
        휴~~ Part1 끝났네요 ^^
        이런 훌륭한 강의 해주셔서 너무 감사합니다. >_<
      • YellowBall
        잘 들었습니다. 시즌1 끝
      • 머머
        블로그나 웹사이트에서 글을 작성할 때 url은 자동으로 하이퍼링크가 붙는게 이런 기능을 이용한 것이군요.
        근데 패턴을 보니 복잡해보이는게 쉬운건 아닌것 같습니다.
        아무래도 자주 사용하는 기능들은 라이브러리들이 있겠지요?

        <?php
        if(empty($_GET['id'])===false){
        $sql = "SELECT topic.id,title,name,description FROM topic LEFT JOIN user ON topic.author = user.id WHERE topic.id=".$_GET['id'];
        $result = mysqli_query($conn, $sql);
        $row = mysqli_fetch_assoc($result);
        echo '<h2>'.htmlspecialchars($row['title']).'</h2>';
        echo '<p>'.htmlspecialchars($row['name']).'</p>';
        }
        ?>

        <script type="text/javascript">
        var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
        var result = $row['description'].replace(urlPattern, function(url){
        return '<a href="'+url+'">'+url+'</a>';
        });
        </script>

        <?php
        echo strip_tags($result, '<a><h1><h2><h3><h4><h5><ul><ol><li>');
        ?>

        웹 애플리케이션 수업에서 만든 index.php에서 활용해볼까 했는데 역시 한번에 되지는 않는군요.
        타 언어에 비해서 웹 애플리케이션은 여러가지 언어가 사용되기 때문에 이해를 잘 못하는것 같습니다.

        요기까지만 보고 웹 자바 강의로 돌아갑니다.
      • egoing
        그건 자바스크립트가 저 함수를 호출 할 때 url 값을 인자로 전달하도록 '약속'되어 있는거예요
        대화보기
        • 아름다운코딩
          안녕하세요, 좋은 강의 잘보고있습니다. ^^
          한가지 질문이있는데요,,

          맨 아래 치환부분에 보면 아래 소스가 있는데요,

          var result = content.replace(urlPattern, function(url){
          return '<a href="'+url+'">'+url+'</a>';
          });

          여기서
          function(url){
          return '<a href="'+url+'">'+url+'</a>';
          }

          url 인자가 어떻게 들어가는거지요??
          앞쪽에 함수쪽에 나왔던거같은데 필요한 부분먼저 띄엄띄엄보다보니 ^^;;

          답변해주시면 정말 감사드리겠습니다.
        • 최현선
          RegExp.exec() 과 String.match() 두가지 모두 추출의 기능인 것 같은데 차이가 있는지 알고 싶습니다.
        • 너구리
          구글의 크롬입니다. 처음 강의에서 나옵니다.

          http://opentutorials.org......639
          대화보기
          • 안녕html5
            수업 너무 재밌게 듣고 있습니다. 근데 이번 강의에서 사용하시는 툴은 뭔가요? 결과값을 바로바로 밑에 뿌려주는게 좋네요. 꼭 알려주세요~
          • 엠제이
            강의를 듣고 질문을 만들어 보았습니다.

            Q. 정규표현식 자체에 대한 부분도 다루고 있는가? 없다면 어디 있는가?
            Q. 캡처가 무엇인가?
            Q. i, g란 것을 보았는데, 이것을 표현하는 단어는?
            Q. 정규표현식은 두 단계로 이뤄지는데, 컴파일과 무엇인가?
          • 휘빈a
            항상 감사합니다
          • 샤핀
            프로그래밍 문법 과 영역까지도 엮어서 소개해 주는 최고의 이고잉님의 교육.. 왜 몇년 전에 이런 사이트를 더 빨리 알지 못했나 싶네요. 감사합니다.
          • 춥파춥스
            잘봤어여. 책보다 이해가쉽네여.ㅋㅋ
          • 나무마루
            처음이라 조금은 헷갈리네요.하지만 좋습니다.
          • hehypapa
            최곱니다...책보다가 이해안되던 부분이었는데요
            이해됐어요 감사합니다
          • egoing
            수정했습니다. 감사합니다. ^^
            대화보기
            • somdari
              정규표현식까지 다뤄주시니 얼마나 감사한지요.. 이 기회에 열심히 해보렵니다..
              한가지 오타가 있네요.. 캡쳐 동영상 아래 부분의 텍스트 중
              이 때 기호 $를 사용하는데 아래 코드는 John과 Smith의 순서를 역전시킨다. ->
              이 때 기호 $를 사용하는데 아래 코드는 coding과 everybody의 순서를 역전시킨다. 로 수정되면 좋을듯 합니..
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기