정규표현식 사용하기
2.0 들어가며
정규 표현식은 주어진 패턴에 일치하는 문자열을 찾기 위해 하용하는 검색 패턴이다.
RegExp도 리터럴과 객체를 모두 가지고 있다.
정규표현식 패턴은 여는 슬리시와 닫는 슬래시 사이에 기술합니다.
주의할점은 이패턴은 문자열이 아니라는 것이다. 패턴에 작은따옴표나 큰따옴표를 사용하면 안된다.
물론 패턴에 따옴표가 포함되는 경우 예외이다.
정규표현식 특수 문자
문자 | 일치 | 예제 |
| ^ | 입력값의 시작 | /^This/ 는 "This is.." 와 일치 |
| $ | 입력값의 끝 | /end/는 "This is the end" 와 일치 |
| * | 0번 이상 반복 | /se*/는 "seeee"와 "se"에 일치 |
| ? | 0번 또는 1번 반복 | /ap?/는 "apple" 과 "and"에 일치 |
| + | 1번 이상 반복 | /ap+/는 "apple"에는 일치. "apie"에는 불일치 |
{n} | 정확히 n번 반복 | /ap{2}는 "apple"에는 일치. "apie"에는 불일치 |
| {n,} | n번 이상 반복 | /ap{2,}는 "apple"과 "apple"의 모든 p에 일치. "apie"에는 불일치 |
{n,m} | 최소 n번, 최대 m번 | /a,p{2,4}/는 "appppppple"의 p 4개에 일치 |
| . | 줄 바꿈을 제외한 모든문자 | /a,e/는 "ape"와 "axe"에 일치 |
| [^...] | 대괄호 안의 문자를 제외한 모든문자 | /a[^px]/는 "ale"에는 일치. "axe"나 "ape"에는 불일치 |
\b | 단어 경계 | /\bno/는 "nono"에서 첫번째 "no"에 일치 |
| \B | 단어 경계를 제외한 모든문자 | /\Bno/는 "nono"에서 두번째 "no"에 일치 |
\d | 0부터 9까지의 숫자 | /\d{3}는 "Now in 123"에서 123에 일치 |
\D | 숫자를 제외한 모든문자 | /\D{2,4}/는 "Now in 123" 에서 "Now"에 일치 |
\w | 단어 문자(알파벳,숫자,밑줄) | /\w/는 "javascript"에서 "j"에 일치 |
\W | 단어 문자가 아닌 문자
(알파벳,숫자,밑줄이 아닌 문자) | /\W/는 "100%"에서 "%"에 일치 |
\n | 줄바꿈 | |
\s | 하나의 공백 문자 | |
\S | 공백 문자가 아닌 모든 문자 | |
\t | 탭 | |
| (x) | 캡쳐할 괄호 | 일치한 문자들 기억 |
[...] | 대괄호 안의 모든문자 | /a[px]e/는 "ape" 와 "axe"에 일치. "ale"에는 불일치 |
2.1 검색하는 문자열이 존재하는 확인하기
Q. 어떤 문자열이 검색하고자 하는 문자열을 포함하고 잇는지 확인하고 싶다.
A.자바스크립트 정규표현식을 사용해서 검색패턴을 정의하고 regExp객체의 test 메서를 사용하면 된다.
var pattern = /Cook.*Book/;
alert(pattern.test("Sam's Cookbook"));
2.2 대소문자를 구분하지 않고 문자열 검색하기
Q. 어떤 문자열에 대소문자를 구분하지 않고 검색하고 싶다.
A. 정규표현식에 대소문자 무시 i 를 사용하면 된다.
var pattern = /Cook.*Book/i;
alert(pattern.test("Sam's Cookbook"));
정규표현식의 플래그
플래그 | 의미 |
| g | 전역 검색, 첫 번째 일치 결과에서 멈추지 않고 전체 문자열에 대해 패턴 검색 |
i | 대소문자를 구분하지 않음 |
| m | 여러줄 문자열에서 시작과 끝을 의미하는 특수 문자(^과$)를 각줄에 적용 |
2.3 전화번호 유효성 검사하기
추후 추가예정
2.4 패턴과 일치하는 모든 부분을 찾고 강조하기
Q. 어떤 문자열안에서 패턴과 일치하는 부분을 모두 찾고 싶다.
A. RegExp.exec 메서드를 전역 플래그 g와 함께 사용하면 패턴에 일치하는 모든 부분을 찾을수 있다.
var searchString = "Now is the time and this is the time and that is the time";
var pattern = /t\w*e/g;
var matchArray;
var str = " ";
while((matchArray = pattren.exec(searchString)) != null){
str += "at "+matchArray.index + "we found " + matchArray[0] + "<br/>";
}
alert(str);
RegExp 객체의 exec 메서드는 정규표현식을 실행하여 일치하는 부분이 없으면 null을 반환하고, 일치하는 부분이 있은 배열을 반환한다. 반환된 배열에는 실제로 일치하는 값, 인덱스, 일치하는 괄호 부분 문자열, 원래의 문자열이 포함되어 있다.
- index : 일치하는 부분 인덱스
- input : 원래 입력한 문자열
- [0]또는 배열에 직접 접근 : 일치하는 값
- [1]...[n] : 일치하는 괄호 부분 문자열
2.5 패턴을 새로운 문자열로 치환하기
Q. 패턴에서 일치하는 부분 문자열을 다른 문자열로 치환하고 싶다.
A. String 객체의 replace 메서드를 정규표현식과 함께 사용하면 된다.
var searchString = "Now is the time and this is the time and that is the time";
var pattern = /t\w{2}e/g;
var replacement = searchString.replace(re,"place");
alert(replacement); // Now is the place, this is the place
전역 플래그 g가 설정된 정규표현식을 String 객체의 replace 메서드와 함께 사용하면 검색된 문자열을 모두 다른 문자열로 치환할 수 있다.
2.6 캡처 괄호를 사용하여 문자열 안의 단어 교환하기
Q. 이름과 성의순서로 입력된 문자열에서 성이 앞에 나오도록 수정하고 싶다.
A. 캡처 괄호와 정규표현식을 사용하여 문자열 안에서 두 개의 이름을 찾아서 기억한 후 그들의 위치를 서로 교환하면된다.
var name = "Abe Lincoln";
var re = /^(\w+)\s(\w+)$/;
var newname = name.replace(re,"$2, $1");
캡처 괄호를 사용하면 문자열 안에서 특정 패턴을 찾을수 있을 뿐만아니라 이우에 찾은 부분 문자열을 참조 할수 있다. 검색된 문자열은 왼쪽부터 오른쪽으로 번호가 매겨지고 참조되어 String 객체의 replace 메서드에서 '$1' 과 '$2'로 사용할 수 있다.
정규 표현식은 공백으로 구분된 두단어를 검색한다. 캡처 괄호는 두단어에 사용되었으므로 이름은 $1을 ,성은 $2 를 사용해서 접근 할 수 있다.
캡처 괄호는 String 객체의 replace 메서드에서만 사용할 수 있는 특수 문자가 아니다. 정규표현식과 replace 메서드에 사용할 수 있다.
특수 문자표
| 패턴 | 목적 |
| $$ | 치환시 달러 문자($)허용 |
| $& | 검색한 부분 문자열 삽입 |
$'
| 일치한 부분 바로 앞까지의 문자열 |
| $' | 일치한 부분 바로 뒤부터의 문자열 |
| $n | RegExp를 사용할 때 n번째 캡처된 괄호값 삽입 |
2.7 정규표현식을 사용해서 양끝 공백 제거하기
Q. Ajax를 호출해서 문자열을 서버로 전송하기 전에 문자열 시작과 끝 부분의 공백을 제거 하고 싶다.
A. ECMAScript 5 이전에는 정규표현식을 사용해서 문자열 시작과 끝 부분의 공백을 제거 했습니다.
//old version
var testString = " This is the string ";
testString = testString.replace(/^\s+/,""); // 문자열 시작 부분의 공백 제거
testString = testString.replace(/\s+$/,""); // 문자열 끝 부분의 공백 제거
//new version
testString = testString.trim(); // 공백이 제거된 문자열
2.8 HTML 태그를 명명된 엔티티로 치환하기
Q. 마트업 예제를 웹페이제 붙여 넣되, 마크업을 이스케이프하여 콘텐츠를 해석하지 않고 꺽은 괄호(<>)를 그대로 출력해야 한다.
A. 정규표현식을 사용하여 꺽은 괄호를 명명된 엔티티 < 와 > 로 바꾸면된다.
var pieceOffHtml = "<p>This is a <span>paragraph</span></p>";
pieceOffHtml = pieceOffHtml.replace(/</g,"<");
pieceOffHtml = pieceOffHtml.replace(/>/g,"<");
2.9 특수 문자 검색하기
Q. 지금까지는 숫자와 문자 그리고 숫자나 문자가아닌 것들을 검했다. 이번에는 정규표현식 문자 그자체를 검색 한다.
A. 백슬래시를 사용하여 패턴 검색 문자를 이스케이프 하면된다.
var re = /\\d/;
var pattern = "\\d{4}";
var pattern2 = pattern.replace(re,"\\D");
숫자를 검색하는 특수 문자 \d에 대응하도록 정규표현식을 만들었습니다. 문자열 안에서 검색하기 위해 패턴을 이스케이프했다. 그후 숫자 특수 문자는 숫자가 아닌 것을 검색하는 특수 문자 \D로 치환 되었다.
출처: http://icoon22.tistory.com/220 [::: 자유로운 영혼 :::]
