프론트엔드 개발

Regular Expression 본문

Front-End/Javascript

Regular Expression

태나미 2021. 3. 9. 01:51
정규표현식이란?
정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다.
문자 검색(search), 문자 대체(replace), 문자 추출(extract)와 같은 역할을 수행합니다.

 

예를들어, 많은 텍스트 중에 전화번호의 텍스트를 찾거나 웹사이트의 패턴을 찾을 수 있습니다.

이렇게 찾아진 패턴을 다른 문자열로 변환시킬 수도 있습니다.

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit https://example.com. Officia veniam molestias iure rem vero totam fuga rerum consequatur sed placeat? Sed, fugit dolor voluptatem libero. 010-1234-5678 Culpa dolor neque temporibus illo.

 

정규 표현식 만들기

정규 표현식을 만드는 방법에는 두 가지가 있습니다.

1. 정규식 리터럴 사용

const regexp1 = /^abc/;
// /표현식/

const regexp2 = /^abc/gi;
// /표현식/플래그

2. RegExp 객체의 생성자 함수 호출

const regexp1 = new RegExp("^abc");
// new RegExg(표현식)

const regexp2 = new RegExp("^abc", "gi");
// new RegExg(표현식, 플래그)

플래그

정규식은 여섯 개의 플래그를 설정해줄 수 있으며, 이를 통해 전역 검색 또는 대소문자 구분 없는 검색을 수행할 수 있습니다. 이 플래그들은 각기 사용될 수도 있고 함께 사용될 수도 있고 순서에 구분이 없습니다.

 

Regular expression flags

문법정리

정규식은 RegExp, test, exec, String, match, replace, search, split 메소드와 함께 쓰입니다.

 

정규식에서 쓰이는 메소드

문법정리

Groups and ranges

Quantifiers

Boundary-type

Character classes


예제

Hi there, Nice to meet you. And Hello there and hi.
I love grey(gray) color not a gry, graay and graaay. grdy
Ya ya YaYaYa Ya

 

abcdefghijklmnopqrstuvwxyz
ABSCEFGHIJKLMNOPQRSTUVWZYZ
1234567890

 

(1) phone

010-898-0893
010 898 0893
010.898.893
010-405-3412
02-878-8888.

 

(2) email

kim.tae.nam@gmail.com

kimtaenam@naver.com

hello@daum.co.kr

 

(3) url

http://www.youtu.be/-ZClicWm0zM

https://www.youtu.be/-ZClicWm0zM

https://youtu.be/-ZClicWm0zM

youtu.be/-ZClicWm0zM 


1. 예제에서 핸드폰 번호만 찾고 싶을때,

(1) /0[12]0*.\d*.\d*/gm

(2) /\d{2,3}\d{2,3}[- .]\d{3}[- .]\d{3,4}/gm

 

2. 예제에서 email만 찾고 싶을 때,

(1) /[a-zA-Z0-9._+-]+@[a-zA-Z-9-]+\.[a-zA-Z0-9.]+/gm

 

3. 예제에서 url만 찾고 싶을 때,

(1) /(https?:\/\/)?(www\.)?youtu.be\/([a-zA-Z0-9-]{11})/gm

소괄호를 이용 => 3가지 그룹

(2) /(?:https?:\/\/)?(?:www\.)?youtu.be\/([a-zA-Z0-9-]{11})/gm

물음표, 콜론을 이용 => 1가지 그룹

const regex = /(?:https?:\/\/)?(?:www\.)?youtu.be\/([a-zA-Z0-9-]{11})/;

const url = 'https://www.youtu.be/-ZClicWm0zM';

url.match(regex);
// (2) ["https://www.youtu.be/-ZClicWm0zM", "-ZClicWm0zM", index: 0, input: "https://www.youtu.be/-ZClicWm0zM", groups: undefined]
// 0: "https://www.youtu.be/-ZClicWm0zM"
// 1: "-ZClicWm0zM"

const result = url.match(regex);

result[0];
// "https://www.youtu.be/-ZClicWm0zM"

result[1];
// "-ZClicWm0zM"

=> 결과값이 배열로 리턴,

result[0]은 매칭되는 전체 문자열

result[1]은 매칭되는 그룹의 데이터가 들어있다.

 

 

 

출처:

유용한 사이트:

 

 

 

'Front-End > Javascript' 카테고리의 다른 글

this  (0) 2021.03.19
null 과 undefined 차이점  (0) 2021.03.14
JSON  (0) 2021.03.07
javascript - object  (0) 2021.02.07
javascript - 객체지향언어, class  (0) 2021.02.03
Comments