Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

몽탁이의 개발일기

자바스크립트의 정규표현식 (RegExp) 본문

Javascript 정리

자바스크립트의 정규표현식 (RegExp)

몽탁 2020. 6. 26. 15:38

정규표현식도 일종의 언어입니다. 그래서 자바스크립트뿐만 아니라 

여러 언어에서 사용을 합니다.

 

정규표현식이 하는 역할은 문자열에서 특정한 문자를 찾아내는 도구입니다.

또 찾아주는것 뿐만 아니라 자신이 원하는 내용을 추출, 확인, 다른 내용으로 치환을 할 수 있습니다.

 

오늘 들은 강의는 자바스크립트에서 정규표현식 간단한 사용방법을 배웠기 때문에 가볍게 정리하겠습니다.

 

1. 패턴 만들기

 

-정규표현식 리터럴

    var pattern=/a/;

 

위와 같이 변수를 선언하게 되면 a라는 문자열을 찾아주는 패턴이 됩니다.

단순한 변수로 저장되는 것이 아닌 문자열을 찾아주는 객체가 탄생되기 때문에 pattern안에는 문자열을 찾아주는

여러 메소드를 사용할 수 있게 됩니다.

 

-정규표현식 객체 생성자

    var pattern = new RegExp('a');

 

위 방식과 의미는 같습니다.

 

2. 정규표현식의 메소드

 

 - 추출

     var pattern=/a/;

     pattern.exec('abcdea'); 

 

결과)

      ["a", index: 0, input: "abcdea", groups: undefined]

 

     exec는 해당 패턴이 들어가 있고 가장 처음 패턴이 나오는 값과 해당 인덱스를 리턴하게 됩니다.

 

 

    var pattern=/a./;

    pattern.exec('abcdea'); 

    

결과)

      ["ab", index: 0, input: "abcdea", groups: undefined]

 

    a뒤에 . 이 붙게 되면 문자를 하나 더 출력합니다. 여기서 .은 1 문자라고 보면 됩니다.

 

 

 - 확인

 

  var pattern=/a/;

  pattern.test('abcdef') 

  

결과) 

     true

 

  test는 반환 값이 boolean이며 패턴이 하나 이상 들어가 있으면 true를 반환하고 존재하지 않으면 false를 반환합니다.

 

 

 - 치환

 

  var pattern=/a/;

  var str='abcde';

  str.replace(pattern,'A');

 

결과) 

    "Abcdef"

 

  여기서는 문자열을 따로 저장해서 String객체의 메소드를 호출하였습니다. 

  replace에 패턴을 넣어주게 되면 해당 문자열과 같은 문자열을 찾아 뒤에 나온 문자열로 치환을 합니다.

 

 

3. 정규표현식 옵션

- var pattern=/a/i;

  i옵션은 대문자 소문자 구분 없이 찾을 수 있게 해주는 옵션입니다.

 

- var pattern=/a/g;

  g옵션은 문자열에 포함되어있는 패턴을 모두 찾아줍니다.

 

- var pattern=/a/ig;

  여러 가지 옵션을 한 번에 합쳐서 사용할 수도 있습니다. 

 

그 외 옵션이 있었지만 강의에서는 가볍게 소개하고 넘어가 옵션에서는 여기까지만 정리하겠습니다.

 

4. 캡처

 

캡처는 정규표현식을 그룹화한 것을 지정하고 가져와 사용하는 것을 캡처라고 합니다.

 

var pattern=/(\w+)\s(\w+)/ 

 

이 패턴을 해석해보면

()는 Group을 의미합니다.

\w는 문자를 의미합니다. (A~Z , a~z , 0~9)

+ 는 앞에 있는 문자가 하나 이상 포함되어있는 경우를 의미합니다.

\s 공백을 의미합니다.

 

즉 위의 패턴은 

a23 A 이런 식의 문자열을 인식할 수 있다는 것입니다.

 

그리고 밑의 코드를 실행하게 되면

 

var str='coding everybody';
var result = str.replace(pattern,"$2,$1");

 

결과) 

    everybody,coding

 

라는 결과가 나오는데 여기서 $2은 2번째 그룹인 (\w+)를 의미하고 $1은 1번째 그룹인 (\w+)를 의미합니다.

그룹을 지정하여 해당 그룹을 치환을 실행하는 이과정을 캡처라고 합니다.

 

이번 강의는 정규식 표현식이 어떤 거다에 의미를 두었기 때문에 

많은 정규식 표현식 내용을 담지는 못했습니다. 

앞서 말했듯이 정규식 표현식은 하나의 언어이기 때문에 따로 공부를 해야 된다는 생각이 듭니다.

 

참고 사이트

 

1. 정규표현식을 실시간을 작성하여 확인할 수 있는 사이트 

http://gskinner.com/RegExr/

 

RegExr: Learn, Build, & Test RegEx

RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).

regexr.com

 

2. 정규표현식을 보기 쉽게 도식화해주는 사이트

http://www.regexper.com/

 

Regexper

 

regexper.com

 

'Javascript 정리' 카테고리의 다른 글

클로저 사용시 주의사항  (0) 2020.06.29
클로저(Closure)  (0) 2020.06.29
자바스크립트에서의 함수  (0) 2020.06.29
유효범위의 대상  (0) 2020.06.26
유효범위 (Scope)  (0) 2020.06.26