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. DreamBoy
    2023.10.10. JavaScript 입문 수업 - 자바스크립트 기본 시작 - 정규표현식 파트 수강했습니다.
  2. springstar
    4년 만에 다시 돌아왔습니다.
    정규표현식이 필요하게 되었거든요 ^^


    고잉형 건강하세요
  3. Griotold
    웹사이트 만드는 프로젝트 중 정규표현식을 활용해야해서 공부하러 왔씁니다. 이번 수업으로는 완전하게 해결이 안되서 정규표현식 자체의 수업을 또 들으러 가야겠습니다만, 정규표현식을 처음 접하는 사람으로서 감을 익혔다고 생각합니다. 강의 고맙습니다.
  4. 손도로도로
    0707
  5. 진진리
    22.05.02 완료
    어렵네요 ㅎ^^ㅎ
  6. 너구리기린
    2022.04.12 일단은 스킵 필요하면 다시 듣겠습니다. 감사합니다!
  7. 마스터하자
    2022.01.20 정규표현식 파트 수강완료
    정규표현식 치환파트가 어렵네요 한번더 돌려서 복습하겠습니다.
  8. mary5544
    22.01.12 일단 패스
  9. 드림보이
    2021.12.03. 정규표현식 파트 수강완료
  10. GelandeWagen
    복습
  11. Grit
    완료 했으나 어렵네요~~
  12. seaWater
    2021. 9. 28. 완료
  13. 엘리
    완료!! 어렵네요 ㅎㅎㅎ
  14. choi
    완료
  15. labis98
    20210820 good~~~!^^
  16. 낭만고양이
    수강완료
  17. GelandeWagen
    210620 ok
  18. Amousk
    좋은 강의 감사합니다.
  19. coding_prince
    감사합니다. 좀 더 쉬운 예시면 좋을것 같습니다.
  20. 박병진
    정규표현식이 어떤것이고 기초는 무엇인지 잘 배웠습니다. 이고잉 선생님.
  21. yogg
    어렵지만 간단하게 봐서 좋았습니다~~
  22. 앙냥냥
    2021.04.02 ~ 2021.04.04 봐씁니다!! 제대로 알면 여기저기 유용하게 쓰일 것 같아서 더 공부해 보려고욥..
  23. Asanagi
    2021.03.19 완료
  24. 진돌
    2021.03.05 완료
  25. 손보선
    \ 의 경우 특수문자(Escape character) 라서 \\ 로 표현해야 하는군요.

    var pattern = new RegExp('(\\w+)\\s(\\w+)');
  26. 정규표현식 스킵 필요하면 볼 것
  27. 정재진
    완료
  28. 주니어개발자
    잘 배웠습니다!
  29. 정상에 오르자가자고고
    완료
  30. 박병진
    패스 나중에 필요하면 오겠습니다.
  31. 20201012 완료
  32. Yongbeom Kwon
    200913 완료
  33. 준식
    20200606 패스, 정규표현식은 또 보러오겠습니다.
  34. 뿡뿡팡야
    완료
  35. 완료. 정규표현식 사용법까지는 무리네요... 추후에 보러 오겠습니다! 좋은 강의 감사합니다 :)
  36. 한강
    굿모닝~~^^! 200305
  37. moleskindiary@gmail.com
    감사합니다. 정규표현식이란 용어를 보고 두렵게만 생각했는데
    어떤 개념인지 감을 잡았습니다.
  38. galangal
    20.02.04 완료
  39. 현수
    감사합니다
  40. Blanc
    2020.01.10(맛보기)
  41. 굼벵이
    완료
  42. 오현주
    2019-12-17 수강
  43. 2019-10-20 8:32pm 완료
  44. 홍주호
    완료 20191019
  45. 박창신
    완료
  46. yopeule@naver.com
    자바스크립트는 정규표현식이 아주 쓰기 좋게 되어있군요. 기본 기능으로 내장되어있네요. 설명이 좋습니다. 감사합니다.
  47. 행복한유령
    3/7 19-07-31
  48. 초밥왕
    오랜만이군 나 자신
    대화보기
    • 아는척해봤어요
      눈치로 해석한거지만 정확한것은 제대로 수업받아야 겟네유!
      대화보기
      • (?:https?) -> https or http
        즉 s가 빠질수도 들어갈수도 있다는 의미입니다.
      버전 관리
      egoing@gmail.com
      현재 버전
      선택 버전
      graphittie 자세히 보기