정규표현식 -1.오리엔테이션 2.패턴만들기 3.RegExp 객체의 사용 4.String과 정규표현식 5.옵션(i,g)6.캡쳐7.치환

1.오리엔테이션 

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다. 

정규표현식은 자바 ,스크립트 ,perl 등 에서 도 사용이 된다 . 어떠한 텍스트안에 어떤 정보가 있는지 없는지를 찾아 낸다 거나

어떠한 텍스트안에 있는  여러 정보들중에서 어떤 패턴에 해당되는 것을 찾아서 다른 텍스트로 치환해야할때 정규 표현식이 필요하다 

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

1. 입문자에게 정규표현식이 무엇인가에 대한 개념을 알려준다. 초심자에게는 사용법까지 공부하는 것은 무리다. 나중에 문자를 처리해야하는 상황이 생겼을 때 이곳을 찾아오거나 본 수업을 완주했을 때 마지막 단계로 본 수업을 공부한다.
2. 정규표현식을 이미 알고 있는 개발자에게는 정규표현식을 자바스크립트에서는 어떻게 사용하는가를 알려준다. 
3. 정규표현식 자체에 대한 학습이 필요하다면 정규표현식 수업(https://opentutorials.org/course/909/5142)을 공부하자.

정규표현식 생성

정규표현식은 두가지 단계로 이루어진다. 하나는 컴파일(compile) 다른 하나는 실행(execution)이다. 우선 컴파일부터 알아보자.

컴파일(compile)= 패턴을 찾는 단계이다 

실행(execution) = 대상을 찾아 어떠한 작업을 하는 것 

컴파일

2.패턴만들기

컴파일은 검출하고자 하는 패턴을 만드는 일이다. 우선 정규표현식 객체를 만들어야 한다. 객체(패턴)를 만드는 방법은 두가지가 있다. a라는 텍스트를 찾아내는 정규표현식을 만들어보자.

정규표현식 리터럴

var pattern = /a/  =/  /사이에있는 a 가 우리가 찾고자하는 문자가 되는 것이다 pattern변수에 담으면 pattern변수를 통해 우리가 찾고자하는 것을 사용할 수 있게 된다 

정규표현식 객체 생성자

var pattern = new RegExp('a');//RegExp = regular expression new를 해서  RegExp(정규표현식)객체를 만듬 

('a')= 찾고자하는 패턴이 a 라는 것을 보여준다  

그래서 /a/과new RegExp('a')= 같은 뜻이다 pattern에 저장 하는 것이다 

두가지 모두 같은 결과를 만들지만 각자가 장단점이 있다. 

정규표현식 메소드 실행

3.RegExp 객체의 사용

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

우리는 작업을 할 때 가장 먼저하는 것은 작업의 대상을 찾는 것 그 다음은 그작업에 대해서 어떤한 작업을 하는것 

정규표현식을 통헤서 우리가하는 주요 작업은 3가지가있다

-어떤한 패턴을 만드면 그정보에대한것을 추출해 내는것/ 이러한 정보 안에서  url과 같은 정보 어떤 문자열 예를 들어 'a' 가 패턴에 존재하는지 하지않는지를 확인(test)하는 것 / 우리가 찾아낸정보를 다은 정보로 치환하는 것 

RegExp.exec()//추출

pattern.하면 제공하는 함수를 볼수 있다 

pattern.exec('abcdef');=검색하고자하는 대상을 입력하고 엔터를 치면 배열에 원소값 a가 나온다 ["a"] 우리는 문자열 a를 찾고 십다 pattern= 문자열 a를 찾고자는 의지가 담겨있다  exec()= 실행 배열로 리턴하는 함수 

정규표현식을 실행하는데 실행 대상을 인자로 전달하는데  우리가 찾고자하는 정보를 담고 있는 정보다

하지만 

var pattern = /a./;// a.을 하게 되면  .은 특수기호다 어떤의미냐면 하나의 문자라는 것이다 .자리에 어떠한 문자건 상관없다 하지만 문자는 하나가 있어야 한다 그리고 . 앞에는 a가 있어야 한다 

pattern.exec('abcdef');// 실행시키면 abcdef를 입력하면 해당하는 a와 그다음은 .이니까 그다음문자 b가 출력된다 

결과 :[ab]

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

문자열 메소드 실행

4.String과 정규표현식

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

문자열 메소드 사용방법

var pattern=/a/;

var str='abcdf';

str.match(pattern);// 우리가만든 패턴을 전달 한다 

["a"]// 배열 리턴 

var str='bcdf';// a를 뺐을 경우 

str.match(pattern);

null// null이 리턴됨

// 축약형은 헷갈릴 수 있다 

String.match()

RegExp.exec()와 비슷하다.

console.log('abcdef'.match(pattern)); // ["a"]

console.log('bcdefg'.match(pattern)); // null

//replace= 치환 

String.replace()

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

// 첫번째 인자는 우리의 패턴  바꾸고자하는 String 입력 

var str='abcdf';

str.replace(pattern,'A');// 패턴에 해당되는 것을 찾아 치환시킨것 

"Abcdf"

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

5.옵션(i,g)

 정규표현식 패턴을 만들 때 옵션을 설정할 수 있다. 옵션에 따라서 검출되는 데이터가 달라진다.

i

i를 붙이면 정규표현식 표현이 대소문자를 구분하지 않는다.

var xi = /a/;//i옵션을 사용하지않는다는뜻

"Abcde".match(xi);

null

var oi=/a/i;//i옵션을 사용한다는뜻

"Abcde".match(oi);

["A"]// i옵션을 사용하게 되면 패턴에서 대소문자 구분하지않게 된다 

var xi = /a/;

console.log("Abcde".match(xi)); // null

var oi = /a/i;

console.log("Abcde".match(oi)); // ["A"];

g(global)

g를 붙이면 검색된 모든 결과를 리턴한다.

var xg=/a/;//g옵션을 사용하지않음 

"abcdea".match(xg);

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

var og=/a/g;//g옵션을 사용

"abcdea".match(og);// 패턴에 해당되는문자열을 전부 리턴 

(2) ["a", "a"]

var xg = /a/;

console.log("abcdea".match(xg));

var og = /a/g;

console.log("abcdea".match(og));

패턴의 옵션은 같이 사용할 수 이다.

var ig = /a/ig; //대소문자 구분하지않고 패턴에 해당되는 모든문자를 리턴한다 

"AabcdAa".match(ig);

(4) ["A", "a", "A", "a"]// 결과를 보면 알 수 있다 

사례

6.캡쳐

괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 이 때 기호 $를 사용하는데 아래 코드는

 coding과 everybody의 순서를 역전시킨다.

도구 활용방법 

정규표현식을 시각화 도구//https://regexper.com/

해석 방법

정규표현식 빌더//https://regexr.com/

 이런한 도구들을 사용하게 되면 조금더 편하게 정규 표현 식을 사용할 수 있다  

group

var pattern = /(\w+)\s(\w+)/;// ( )= 그룹을 의미한다 

var str = "coding everybody";

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

//치환을 하는데 어떤것으로 치환하냐면 패턴에 해당하는 문자를 뒤에 $2,$1으로 치환한다는 뜻  

//$=특수 가능을 갖는다 $2=2번째 그룹을 의미한다 $1=1번째 그룹()을 의미한다 

//"$2가 나오고 뒤에, $1이 나온다는 정의 " 그리고 공백 부분이 점공백으로 바뀐것을 볼 수 있다 

console.log(result);

7.치환

치환

아래 코드는 본문 중의 URL을 링크 html 태그로 교체한다. 

1. 패턴정의

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;

2content 라는 String

var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';

3.//content.replace 함수 호출하는데 함수 1번째 인자는 패턴 2번째인자는  태스트가아닌 함수를 전달한다 

replace메소드안에서 메소드 실행시 urlPattern해당(생활코딩 ,네이버) 되는 패턴을 찾을 때마다 2번째 인자인 함수가 

내부 적으로 호출된다. 호출될때 자바스크립트는 호출된 시점에서 검색된 문자열 즉 위에 url을 검색했을 때 함수를 호출 했다면 

 함수의 인자에 url을 전달하도록 약속이 되어있다 

var result = content.replace(urlPattern, function(url){

// 인자를 받아서 어떠한 텍스트로 가공한다음에  return 해주면 오리지날 정보는 우리가 리턴해준 정보로 치환이 되고 

그 작업이 다끝나면 최종적으로 변경된 내용을  문자열(result)로 return 해준다 

    return '<a href="'+url+'">'+url+'</a>';

});

console.log(result);// 호출해 보면 url만 적혀있었던 부분에 링크 태그 가붙은것을 볼수있다 

결과

생활코딩 : <a href="http://opentutorials.org/course/1">http://opentutorials.org/course/1</a> 입니다. 

네이버 : <a href="http://naver.com">http://naver.com</a> 입니다.

참고

생활코딩 정규표현식 수업//https://opentutorials.org/course/909/5142

정규표현식을 시각화 도구//https://regexper.com/

정규표현식 빌더//https://regexr.com/