관리 메뉴

FU11M00N

[ JavaScript ] JS 정규표현식 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS 정규표현식

호IT 2021. 2. 3. 23:26

이미지 출처 :        https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 


 

 

정규표현식(Regular Expression)이란?

 

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

이 도구를 사용하여 수십줄이 필요한 작업을 한줄로 끝낼 수 있습니다.

정규표현식은 하나의 언어라고 볼수있습니다.

해당포스팅에서는 JS에서 정규표현식을 어떻게 다루는지를 작성한 포스팅입니다.

 

아래의 링크에서 정규표현식에대해 자세히 알 수있습니다.

 

opentutorials.org/course/909

 

정규 표현식이란? - 생활코딩

정규표현식 정규표현식(正規表現式, Regular Expression)은 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단이

opentutorials.org

 

 

 

- 정규표현식 생성

 

 

 

정규표현식은 두가지 단계로 이루어집니다.

하나는 컴파일(compile), 다른 하나는 실행(execution)입니다. 우선 컴파일부터 알아보도록 하겠습니다.

 

 

 

- 컴파일

 

컴파일은 검출하고자 하는 패턴을 만드는 일입니다.

우선 정규표현식 객체를 만들어야합니다.

객체를 만드는 방법은 두가지가있습니다.

 

a라는 텍스트를 찾아내는 정규표현식을 만들면 아래와 같습니다. 

 

 

- 정규표현식 리터럴

 

var pattern = /a/;

 

첫번째 방법은 찾고자 하는 문자열을 /(슬래쉬) 로 감싸는 방법이있습니다.

 

 

 

- 정규표현식 객체 생성자

 

var pattern = new RegExp('a');

 

두번째 방법은 new RegExp('패턴화 시킬 문자열') 의 형태로 정규표현식 객체를 생성합니다.

 

 

 

- 정규표현식 메소드 실행

 

 

 

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

 

정규표현식을 통해서 우리가 하는 작업은 크게 3가지가있습니다.

 

어떠한 패턴을 만들면 그 패턴을 추출하는것 ex) 이메일,url

패턴을 test하는것 ex) 이메일이나 url에 a를 찾고자할때 test할때.

찾아낸 정보를 다른정보로 치환하는것.

 

 

- RegExp.exec()

 

정규표현식 객체에 들어간 패턴을 찾아 출력해줍니다.

 

 

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

 

 

exec('탐색할 문자열') 의 형태로 쓰입니다.

 

 

 

 

 

 

 

 

또한 

/a./ 을 하게되면 . 은 특수한 기호인데, 하나의 문자라는 의미입니다. 

 

. 에는 어떠한 문자라도 상관없이 1문자가 와야합니다. 

 

 

 

 

 

 

 

 

 

만약 a 에 해당하는 문자가 없다면, null 이 출력됩니다.

 

 

var pattern = /a/
console.log(pattern.exec('bcwoekqmdlz'));

 

 

 

 

 

 

- RegExp.test()

 

test는 첫번째 인자 정보안에 찾고자하는 패턴이 존재한다면 true를 반환하고 아니라면 false를 반환합니다.

 

 

var pattern = /a/
console.log(pattern.test('abcdef')); // true
console.log(pattern.test('bcdefg')); // false

 

 

 

 

`

 

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

 

 

 

String.match()

 

 

앞서 언급했던 RegExp.exec()와 유사합니다.

 

 

 

 

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

 

 

 

 

 

 

 

 

String.replace()

 

 

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

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

정규표현식 옵션(i, g)

 

 

 

정규표현식 패턴을 만들 때 옵션을 설정할 수 있습니다.

옵션에 따라서 검출되는 데이터가 달라집니다.

 

 

- 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));

 

 

 

 

이러한 옵션들은 여러개 붙여서 사용가능합니다.

 

 

 

 

 

- 캡쳐

 

 

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

 

 

우선 pattern 에 들어있는 것을 해석해보자면

 

괄호는 그룹이고,

 

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

 

뒤에 붙은 +는 1개 이상이라는 뜻이고,

 

\s 는 공백입니다.

 

 

즉, pattern은 1개 이상의 문자, 공백, 1개 이상의 문자 로 이루어진 패턴임을 알 수 있습니다.

 

 

replace 안에 들어있는 "$2 $1" 의 의미도 살펴봅시다.

 

 

 

$의 의미는 그룹화(괄호로 묶인)된 것에 번호를 붙인 것입니다.

 

위의 예시에서 coding 은 $1 에 해당하고, test는 $2에 해당하는 것이죠.

 

이제 예제를 실행시켜 보도록 하겠습니다.

 

 

 

 

 

 

 

괄호안의 패턴은 마치 변수처럼 재사용할 수 있습니다.

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

 

Comments