[JavaScript -생활코딩] 정규표현식

정규표현식

정규표현식: regular expression

문자열에서 특정한 문자를 찾아내는 도구 [주요한작업들: 추출>test>(다른정보로)치환]

정규표현식은 수많은 언어에서 사용되어있고, 여기 정리한 내용은 자바스크립트 안에서의 정규표현식이다.

​

정규표현식 두가지의 방식

1.컴파일 : 패턴을 찾는 것

2.실행 : 우리가 찾은 패턴(대상) 어떠한 작업을 하는 것

---

컴파일

정규표현식 리터럴

*var str ="a" - 문자열을 변수에 담을때 "" 사이의 a가 문자열이다

정규표현식리터럴 :

var pattern = /a/;

변수의 이름 pattern , //사이의 a가 찾고자하는 문자이다

​

정규표현식 객체 생성자

var pattern = new RegExp('a');

RegExp = regular expression의 약자

new RegEzp = 정규표현식 객체

'a' 찾고자하는 문자

​

>>> 두가지 모두 같은 결과지만 각자 장단점이 있음

---

실행

1) 정규표현식 메소드 실행

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

​

RegExp.exec()

RegExp = 정규표현식 객체

var pattern = /a/; pattern.exec('abced'); // ["a"]가 결과로 출력

var pattern = /a./; pattern.exec('abced'); // ["ab"]가 결과로 출력

↑ a뒤에 . .뜻 = 하나의문자 (뒤 문자가 따라옴)

var pattern = /a/; pattern.exec('bcdef'); // null 이 결과로 출력

↑ a가 없기에 null로 출력

↑ exec를 사용하는이유 = 추출

​

​

RegExp.test()

var pattern = /a/; pattern.test('abcde'); 
 // true 이 결과로 출력 
 var pattern = /a/; pattern.test('bcde'); 
 // false 이 결과로 출력

↑ .test 첫번째 인자('abcde') 우리가 찾는 패턴값이 있다면 true, 아니면 false

↑ test를 사용하는이유 = 존재의 유무를 테스트

​

​

​

2) 문자열 메소드 실행

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

​

String.match()

RegExp.exec()와 비슷하다

var pattern = /a/; var str = 'abcdef'; str.match(pattern); 
// ["a"]가 결과로 출력 
var str = 'bcdef'; str.match(pattern); 
// null 이 결과로 출력
​

String.replace()

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

var pattern = /a/; var str = 'bcdef'; str.replace(pattern, "A'); 
//"Abcdef" 가 결과로 출력

---

정규표현식 옵션

옵션을 통해서 정규표현식이 동작하는 방법을 다르게 설정할수있다.

​

i

i라고 하는 것은 정규표현식의패턴이 대소문자를 구분하지 않게 하는 것

var xi = /a/; "Abcde".match(xi); 
// null 이 결과로 출력 
var oi = /a/i; "Abcde".match(oi); 
// ["A"]가 결과로 출력

​

g

g = global의 약자

var xg = /a/; "abcdea".match(xg); 
//["a"]가 결과로 출력 
var og = /a/g; "abcdea".match(og); 
// ["a", "a"]가 결과로 출력
var ig = /a/ig; "AabcdAa".match(ig); 
//["A", "a", "A", "a"]가 결과로 출력

g를 쓸 경우엔 다수의 a를 전부 출력해준다 / ig를 함께 사용할 경우 대문자 소문자 전체 문자를 출력해준다

---

캡처

괄호 안의 패턴은 마치 변수처럼 재사용할 수 있다. 이때 기호 $를 사용한다

그룹을 지정하고(괄호), 그룹의 값을 가져와서 사용할 수 있는 개념 = 캡처

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

( ＼w+) ＼s( ＼w+)

( ) - 그룹의미

＼w - 문자의미 (A~Z,a~z,0~9 어떠한문자)

+ - 수량자, 앞에있는문자가 1개이상일때 이패턴이 유효해짐

＼s - 공백

＼w - 문자의미 = 문자가 하나이상 있을때 해당

​

예를 들어 coding everybody 는 해당됨, codingeverybody는 해당되지않음( 공백이없기에 )

var pattern = /(\w+)\s(\w+)/; 
var str = "coding everybody"; var result = str.replace(pattern, "$2", "$1"); 
console.log(result); //everybody, coding 으로 결과가 출력

pattern에 해당되는 문자를 뒤에있는 값("$2", "$1")으로 치환(replace)한다.

$2를 ,찍고 여백을 두고 $1이 나온다.

$2 - 두번째 등장하는 그룹 ( ＼w+) 의미 = coding

$1 - 첫번째 등장하는 그룹 ( ＼w+) 의미 = everybody

---

치환

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

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim; 
//정규표현식에 대한 패턴 var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 
네이버 : http://naver.com 입니다. '; 
var result = content.replace(urlPattern, function(url)
{ return '<a href="'+url+'">'+url+'</a>'; }); console.log(result);

↓ 결과

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