[JavaScript] 정규 표현식을 사용한 데이터 변환[JavaScript] 정규 표현식을 사용한 데이터 변환
Posted at 2019. 4. 16. 15:36 | Posted in JavaScript & jQuery/JavaScript■ 정규 표현식이란?
정규 표현식(regular expression)이란, 문자열의 패턴을 표현하는 표기 방법으로 문자열의 검색과 치환에 유용하다.
문자열의 패턴을 메타 문자(미리 약속된 특별기호)를 조합하여 표현함으로써 문자를 검색하거나 치환할 수 있다.
대부분의 프로그래밍 언어에서 정규 표현식을 지원하며, 자바스크립트에도 표준 기능으로 탑재되어 있다.
정규 표현식은 씹으면 씹을수로 맛이나는 오징어처럼 쓰면 쓸수록 그 유용함을 깨닫게 된다.
또한, 문자열을 효과적으로 다루기 위해 반드시 터득해야 되는 기술 중 하나이다.
그러면 정규 표현식의 기본 문법과 자바스크립트에서의 사용법을 알아보자.
■ 자바스크립트에서의 정규 표현식 사용법
자바스크립트에서는 소스 코드 중에 '/패턴/'으로 정규표현식 객체를 생성할 수 있다. 이를 정규 표현식 리터럴이라고 한다.
var re = /value=\d+/; |
혹은 RegExp 객체를 생성하여 사용할 수도 있다.
var re = new RegExp("value=\d+"); |
정규 표현식 리터럴을 사용하면 스크립트가 로드되는 시점에서 정규 표현식이 컴파일되므로 성능에 유리하다.
한편 RegExp 객체를 사용하면 문자열 변수로 정규 표현식 패턴을 지정할 수 있어 동적으로 정규 표현식을 다룰 수 있게 된다.
#01. 정규 표현식 메소드
자바스크립트에는 정규 표현식과 관련하여 다음과 같은 메소드가 준비되어 있다.
▼ JavaScript의 정규 표현식 메서드 일람 |
|
메서드 |
설 명 |
.exec( ) |
· 문자열 중에서 일치하는 부분을 검색하여 결과를 배열로 반환한다. · 검색에 실패한 경우 null을 반환한다. |
.test( ) |
· 문자열 중에서 일치하는 부분이 있는지를 테스트한다. · true / false 중 하나를 반환한다. · RegExp의 메서드 |
.match( ) |
· 문자열 중에서 일치하는 것을 검색하여 결과를 배열로 반환한다. · 일치하는 패턴이 없는경우 null을 반환한다. · String의 메서드 |
.search( ) |
· 문자열 중에서 일치하는 것이 있는지를 테스트한다. · 일치하는 패턴이 없는경우 -1을 반환한다. · String의 메서드 |
.replace( ) |
· 문자열 중에서 일치하는 것을 찾아서 다른 문자열로 치환한다. |
.split( ) |
· 문자열을 정규 표현식으로 분할하여 부분 문자열의 배열을 반환한다. |
기능이 비슷해 보이는 메서드들이 있는데 다음과 같이 용도에 따라 나눠 생각하면 된다.
어떤 문자열 안에 정규 표현식 패턴이 있는지 확인만 하고 싶을 때는 test( ) 또는 search( )를 사용한다.
더 자세한 정보를 알고 싶을 때에는 exec( ) 혹은 match( )를 사용한다.
#02. RegExp.exec( ) 메서드
RegExp.exec( ) 메서드는 정규 표현식에 해당하는 문자열을 검색하여 패턴이 존재하면
문자열의 배열을 반환함과 동시에 RegExp 객체의 속성을 업데이트하고, 일치하는 패턴이 없으면 null을 반환한다.
결과로 반환되는 배열에는 정규 표현식에 일치하는 문자열이 첫 번째 요소에 담겨 있고,
이어서 정규 표현식 중 괄호로 묶인 부분에 해당하는 부분 문자열이 차례로 담겨 있다.
또한, 이 배열에는 속성으로 정규식에 해당하는 문자열의 인덱스 정보와 입력받은 문자열 값을 포함하고 있다.
<html> <head> <title>:: RegExp.exec() 메서드 ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() {
// 정규 표현으로 수치 + 영소문자 패턴 var re = /([0-9]+)([a-z]+)/g; // 정규 표현식 객체를 리터럴로 만들어서 변수 str에 대입 // [ ]괄호가 2번 사용되었는데 각각 부분 패턴을 의미한다.
// 대상 문자열 var str = "111jpy,8usd,xxx"; // 정규 표현식으로 확인하고 싶은 문자열을 변수 str에 대입
// 1회 실행 console.log(re.exec(str));
// 2회 실행 console.log(re.exec(str));
// 3회 실행 console.log(re.exec(str)); }); </script> </head> </html> |
수행결과는 아래와 같다.
정규 표현식에 g플래그를 지정하면 문자열 안에 일치하는 모든 패턴을 포함하게 된다.
예제에서는 exec( )를 여러 번 호출하며 일치하는 패턴을 차례로 출력하고 있다.
그런데 exec( ) 메서드는 test( )나 search( )에 비해 실행 속도가 느리므로 패턴의 존재 여부만을 확인하고 싶은 경우에는
사용을 권장하지 않는다.
#03. RegExp.test( ) 메서드
RegExp.test( ) 메서드는 인자로 주어진 문자열에 정규 표현식에 해당하는 문자열 패턴이 있는지 여부를 조사한다.
결과로 true나 false의 boolean 값을 반환한다.
<html> <head> <title>:: RegExp.exec() 메서드 ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() {
// 우편번호 nnn-nnn 패턴 var re = /^\d{3}-\d{3}$/;
// 정규표현식으로 패턴이 일치하는지 확인 console.log("123-123 : ", re.test("123-123")); console.log("12-123 : ", re.test("12-123")); // 숫자의 자릿수가 부족해 false console.log("440-001 : ", re.test("440-001")); console.log("aaa-bbb : ", re.test("aaa-bbb")); // 숫자가 아닌 알파벳으로 구성되어 있기때문에 false }); </script> </head> </html> |
수행결과는 아래와 같다.
#04. String.match( ) 메서드
String 객체에 관련된 match( ) 메서드는 인자로 전달받은 정규 표현식 패턴을 조사한다.
정규표현식에 g 플래그를 포함하지 않은 경우는 RegExp.exec( ) 메서드와 같은 결과를 반환하지만.
g 플래그를 포함한 경우에는 일치하는 부분을 모두 포함한 배열을 반환한다.
일치하는 패턴이 없으면 null을 반환한다.
g 플래그 여부에 따른 결과의 차이를 유념해서 보도록 한다.
<html> <head> <title>:: String.match() 메서드 ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() {
// 대상 문자열 var str = "v=20, n=40, c=30";
// 숫자 패턴 검색 console.log("숫자 패턴 검색 : ", str.match(/[0-9]+/));
// 모든 숫자 패턴을 검색 console.log("모든 숫자 패턴 검색 : ", str.match(/[0-9]+/g));
// 변수 = 숫자의 조합을 검색 console.log("변수 = 숫자의 조합을 검색 : ", str.match(/\w+=\d+/g)); }); </script> </head> </html> |
수행결과는 아래와 같다.
#05. String.search( ) 메서드
대상 문자열에 정규 표현식에 해당하는 패턴이 있는지 확인할때 사용한다.
정규 표현식에 해당하는 패턴이 발견되면 발견된 인덱스를 돌려주고, 없으면 -1을 반환한다.
<html> <head> <title>:: String.search() 메서드 ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { // 대상 문자열 var str = "zip:999-999, mail:a@example.com"; // 우편번호 검색 console.log("우편번호 검색 : ", str.search(/\d{3}-\d{3}/));
// 이메일 검색 console.log("이메일 검색 : ", str.search(/\w+\@\w+\.\w+/));
// URL 검색 console.log("URL 검색 : ", str.search(/https?:\/\//)); }); </script> </head> </html> |
수행결과는 아래와 같다.
#06. String.replace( ) 메서드
정규 표현식으로 치환을 수행하는 replace( ) 메서드는 두 가지 형태의 사용법이 있다.
① 정규 표현식을 이용한 치환
str.replace( 정규 표현식, 치환될 문자열 ) |
실제 코드를 통해 사용법을 파악하자.
<meta charset="utf-8"> <html> <head> <title>:: String.replace() 메서드 ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { // 대상 문자열 var str = "Today 10per OFF";
// 숫자를 30으로 치환 console.log("숫자를 30으로 치환 : ", str.replace(/\d+/, "30"));
// 숫자와 이어지는 영문 소문자까지 치환 console.log("숫자와 이어지는 영문 소문자까지 치환 : ", str.replace(/\d+[a-z]+/, "500won"));
// 알파벳을 전부 지우고 숫자만을 남긴다. console.log("알파벳을 전부 지우고 숫자만을 남김 : ", str.replace(/[a-zA-Z]+/g, "")); }); </script> </head> </html> |
치환될 문자열 내에 특수한 치환 패턴을 포함할 수 있다.
▼ 치환될 문자열에 사용되는 특수 기호 |
|
패턴 |
설 명 |
$$ |
· 문자 '$'를 삽입한다. |
$& |
· 매치된 부분 문자열을 삽입한다. |
$` |
· 매치된 부분 문자열 직전의 문자열을 삽입한다. |
$' |
· 매치된 부분 문자열 직후의 문자열을 삽입한다. |
$1$2$3… |
· 괄호로 묶인 부분 문자열을 삽입한다. |
<html> <head> <title>:: String.replace() 메서드 ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { // 대상 문자열 var str = "Today 10per OFF";
// 숫자를 30으로 치환 console.log("숫자를 30으로 치환 : ", str.replace(/\d+/, "30"));
// 숫자와 이어지는 영문 소문자까지 치환 console.log("숫자와 이어지는 영문 소문자까지 치환 : ", str.replace(/\d+[a-z]+/, "500won"));
// 알파벳을 전부 지우고 숫자만을 남긴다. console.log("알파벳을 전부 지우고 숫자만을 남김 : ", str.replace(/[a-zA-Z]+/g, "")); }); </script> </head> </html> |
② 콜백함수를 사용하여 치환
콜백 함수를 사용하는 replace( ) 메서드의 사용법을 알아보자.
str.replace( 정규표현식, 치환 함수 ) |
문자열 str안의 정규 표현식에 일치하는 문자열에 대해 치환 함수가 수행된다.
그러면 수행된 치환 함수의 반환 값으로 치환된다.
직접 프로그램으로 확인해 보자.
다음은 영어 단어의 소문자를 대문자로 치환하는 예이다.
<html> <head> <title>:: String.replace() 메서드 ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { // 대상 문자열 var str = "piano GUITAR";
// 대소문자를 소문자로 치환 var txt = str.replace(/[a-z]+/g, function(v) {
return v.toUpperCase(); });
document.getElementById("instrument").innerHTML = txt; }); </script> </head> <body> <h1 id="instrument"></h1> </body> </html> |
위 프로그램을 실행하면 "PLANO GUITAR"라고 표시된다.
콜백 함수를 사용하면 단순한 치환이 아닌 복잡한 치환까지도 자유롭게 프로그래밍 할 수 있다.
아래 코드는 텍스트 중에서 숫자를 찾아서 세금에 해당하는 값에 8%를 더한 값으로 치환하는 프록램이다.
<html> <head> <title>:: String.replace() 메서드 ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { // 대상 문자열 var str = "price : 100 won";
// 금액에 해당하는 문자열을 찾아서, 세금 8%를 더하여 치환 var txt = str.replace(/\d+/, function(v) { v = parseInt(v); return Math.ceil(1.08 * v); });
document.getElementById("price").innerHTML = txt; }); </script> </head> <body> <h1 id="price"></h1> </body> </html> |
프로그램을 실행하면 "price : 108 won"으로 표시된다.
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
| [JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기 (43) | 2019.06.13 |
|---|---|
| [JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능 (0) | 2019.05.23 |
| [JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기 (0) | 2019.02.24 |
| [JavaScript] 배열의 값을 콤마(,)로 분리하기 (0) | 2019.02.24 |
| [JavaScript] GMT, 그리니치 표준시 구하기 (2) | 2019.01.25 |
