정규표현식

😊정규표현식이란?

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규표현식 또한 객체입니다. 정규표현식은 두가지 단계로 이루어진다. 하나는 컴파일(compile) 다른 하나는 실행(execution)이다. 우선 컴파일부터 알아보자. 컴파일은 검출하고자 하는 패턴을 만드는 일이다. 우선 정규표현식 객체를 만들어야 한다. 객체를 만드는 방법은 두가지가 있다. a라는 텍스트를 찾아내는 정규표현식을 만들어보자.

🤣정규표현식을 만드는 방법

1.정규식 리터럴(슬래쉬"/"로 감싸는 패턴)

var pattern = /a/; 

정규식 리터럴은 스크립트가 불러와질 때 컴파일됩니다. 만약 정규식이 상수라면, 이렇게 사용하는 것이 성능을 향상시킬 수 있습니다.

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

var pattern = new RegExp('a');

생성자 함수를 사용하면 정규식이 실행 시점에 컴파일됩니다. 정규식의 패턴이 변경될 수 있는 경우, 혹은 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우에는 생성자 함수를 사용하세요.

😎정규표현식이 이용되는 곳

• 어떠한 패턴을 만들면 패턴에 해당되는 문자열을 추출해내는 것
• 어떤 url이나 문자열에서 해당 패턴이 존재하는지 테스트하는것
• 우리가 찾아낸 어떤 정보를 다른 정보로 치환하는 것

😍정규표현식의 메소드

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

1.RegExp.exec(str)

exec() 메소드는 어떤 문자열에서 정규표현식과 일치하는 문자열 검색을 수행한다.
반환값은 배열을 리턴하거나 null
RegExp: 정규표현식 객체
str: 정규표현식 검색을 수행할 대상 문자열

var pattern = new RegExp('a');
console.log(pattern.exec('abcdef')); // ["a"],정규표현식과 일치하는 문자열
console.log(pattern.exec('bcdefg')); // null, 정규표현식 검색에 실패

2.RegExp.test(str)

test()메소드는 정규식과 지정된 문자열 사이의 일치에 대한 검색을 실행합니다.
반환값은 true또는 false.
RegExp: 정규표현식 객체
str: 정규표현식 검색을 수행할 대상 문자열

var pattern = new RegExp('a');
console.log(pattern.test('abcdef')); // true, 해당 문자열에 해당 패턴이 존재함
cnosole.log(pattern.test('bcdefg')); // false, 해당 문자열에 해당 패턴이 존재하지않음

😁String객체의 정규표현식 사용법

1.str.match(RegExp)

match() 메서드는 문자열이 정규식과 매치되는 부분을 검색합니다.
RegExp: 정규표현식 객체
str: 정규표현식 검색을 수행할 대상 문자열

var pattern = /a/; 
var str = 'abcde';
console.log(str.match(pattern)); // ["a"],str의 문자열에 해당 패턴이 있으므로 배열로 리턴
var str = 'bcde';
console.log(str.match(pattern)); // null,str의 문자열에 해당 패턴이 없으므로 null을 리턴

2.str.replace(RegExp|substr, newSubstr|function)

replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다.
RegExp (pattern)
정규식(RegExp) 객체 또는 리터럴. 일치하는 항목은 newSubStr 또는 지정된 함수(function)가 반환 한 값으로 대체됩니다.
substr (pattern)
newSubStr로 대체 될 String. 정규식이 아닌 글자 그대로의 문자열로 처리됩니다. 오직 첫 번째 일치되는 문자열만이 교체됩니다.
newSubStr (replacement)
첫번째 파라미터를 대신할 문자열(String). 여러가지 대체 패턴들이 지원됩니다. 아래의 "매개변수가 string으로 지정되었을 때" 섹션을 참고하세요.
function (replacement)
주어진 regexp 또는 substr에 일치하는 요소를 대체하는 데 사용될 새 하위 문자열을 생성하기 위해 호출되는 함수. 이 함수에 제공되는 인수는 아래 "매개변수가 function으로 지정되었을 때"단원에서 설명합니다.

var pattern = /a/; 
var str = 'abcde';
console.log(str.replace(pattern,"A"));//Abcde, 첫번째인자인 정규식에 해당하는 문자를 찾아서 두번째 인자값으로 치환

😁정규표현식에서의 특수문자

Character	Meaning
+	앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응됩니다. {1,} 와 같은 의미 예를 들어, /a+/ 는 "candy"의 'a'에 대응되고 "caaaaaaandy" 의 모든 'a'들에 대응되지만, "cndy" 내의 어느 부분과도 대응되지 않습니다
^	입력의 시작 부분에 대응됩니다. 만약 다중행 플래그가 참으로 설정되어 있다면, 줄 바꿈 문자 바로 다음 부분과도 대응됩니다.예를 들어, /^A/ 는 "an A" 의 'A'와는 대응되지 않습니다, 그러나 "An E" 의 'A'와는 대응됩니다.'^' 가 문자셋([abc]) 패턴의 첫 글자로 쓰인다면, 그 때는 전혀 다른 의미를 가집니다.예를 들어, /[^javascript]/는 [ ]안의 각 문자를 제외하고 검색한다.
[\d]	숫자만 선택
[\D]	숫자가 아닌것만 선택(/d와 반대)-한글,영문,공백,특수기호 등
[\w]	문자와 숫자를 선택(그러나 한글은 선택되지않는다)
[\W]	문자와 숫자가 아닌 것을 선택(/w와 반대)-한글,공백,특수기호
[a-zA-Z가-힣]	영어소문자,대문자,한글 모두 선택
[\s]	공백만 선택
[\S]	공백이 아닌 것만 선택
.	개행 문자를 제외한 모든 단일 문자와 대응됩니다. 예를 들어, /.n/는 "nay, an apple is on the tree"에서 'an'과 'on'에 대응되지만, 'nay' 에는 대응되지 않습니다.
?	앞의 표현식이 0 또는 1회 등장하는 부분과 대응됩니다. {0,1} 와 같은 의미입니다. 예를 들어, /e?le?/ 는 "angel"의 'el' 에 대응되고, "angle"의 'le' 에 대응되고 또한 "oslo" 의 'l'에도 대응됩니다.
*	앞의 표현식이 0회 이상 연속으로 반복되는 부분과 대응됩니다.{0,} 와 같은 의미입니다. 예를 들어, /bo*/ 는 "A ghost booooed" 의 'boooo' 와 대응되고, "A bird warbled" 의 'b'에 대응되지만 "A goat grunted" 내의 어느 부분과도 대응되지 않습니다.
{n,m}	n과 m은 양의 정수이고, n <= m를 만족해야 합니다. 앞 문자가 최소 n개, 최대 m개가 나타나는 부분에 대응됩니다. m이 생략된다면, m은 ∞로 취급됩니다.
(x)	다음의 예제가 보여주는것처럼 'x'에 대응되고, 그것을 기억합니다. 괄호는 포획 괄호라 불립니다. 패턴 /(foo) (bar) \1 \2/ 안의 '(foo)' 와 '(bar)'는 문자열"foo bar foo bar"에서 처음의 두 단어에 대응되고 이를 기억합니다.패턴 내부의 \1와 \2는 문자열의 마지막 두 단어에 대응됩니다.\1, \2, \n과 같은 문법은 정규식의 패턴 부분에서 사용됩니다. 정규식의 치환 부분에서는 $1, $2, $n과 같은 문법이 사용되어야 합니다. 예를 들어, 'bar foo'.replace( /(...) (...)/, '$2 $1')와 같이 사용되어야 합니다. $& 패턴은 앞에서 대응된 전체 문자열을 가리킵니다.

🙄플래그를 사용한 고급검색

플래그	설명
g	전역 검색
i	대소문자 구분 없는 검색
m	다중행(multi-line) 검색
s	.에 개행 문자도 매칭(ES2018)
u	유니코드; 패턴을 유니코드 코드 포인트의 나열로 취급합니다.
y	"sticky" 검색을 수행. 문자열의 현재 위치부터 검색을 수행합니다.

🤩정규표현식 대표적인 사용예

우편번호

   var regexp_postalcode = /^\d{5}$/;
   console.log(regexp_postalcode.text("35213");  //true    
   console.log(regexp_postalcode.text("D35213");  //false,숫자5자리를 넘었으므로 
   console.log(regexp_postalcode.text("352136");  //false,시작부분에 숫자가 아닌 문자가 왔으므로 

해석 : ^ : 뒤에 따라오는 문자셋으로 시작해야한다는 뜻.
        \d : 숫자가 와야한다(0~9)
        {5} : 5자리이상
        $ : 입력의 끝맺음. 위에서는 앞에 \d{5}가 있으므로 숫자 5자리로 끝맺음을 뜻함
        즉, 여기서는 숫자로 5자리를 채워야한다는 뜻

전화번호

   var regexp_telephone = /^(02|064)-(\d{3}|\d{4})-\d{4}$/;  //집전화 
   console.log(regexp_telephone.text("02-252-1234")); //true
   console.log(regexp_telephone.text("064-252-1234"); //true
   console.log(regexp_telephone.text("010-252-1234"); //false,010으로 시작했으므로
   console.log(regexp_telephone.text("064252-1234"); //false,하이픈이 없으므로 
   var regexp_mobile = /^(010)-\d{4}-\d{4}$/;            //핸드폰
   console.log(regexp_mobile.test("010-1234-5678")); //true

해석 : ^ : 뒤에 따라오는 문자셋으로 시작해야한다는 뜻.
        (02|064) : 02 또는 064가 와야한다.
        (\d{3}|\d{4}) : 3자리 숫자 또는 4자리 숫자
        \d{4}$ : 4자리 숫자로 끝맺음