[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 txtstr.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"으로 표시된다.











Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기