Language/JavaScript [JavaScript] 정규 표현식 / RegExp 객체

Dexter_- 2018. 10. 23. 12:26

728x90

정규 표현식(regular expression)이란 ?

정규 표현식(regular expression)은 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴이다. 이러한 검색 패턴은 모든 종류의 문자열 검색이나 교체 등의 작업에서 사용할 수 있다.

정규 표현식의 생성

자바스크립트에서 정규 표현식을 만드는 방법은 다음과 같다.

정규 표현식 리터럴을 이용한 생성
RegExp 객체를 이용한 생성

자바스크립트에서 정규 표현식 리터럴은 다음 문법을 사용하여 표현한다.

문법

/검색 패턴/플래그

정규 표현식 리터럴은 슬래시(/) 기호로 시작하여, 슬래시(/) 기호로 끝난다. 또한, 필요에 따라 플래그를 추가하여 기본 검색 설정을 변경할 수도 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Regular Expression</title>
</head>
<body>
    <h1>정규 표현식의 생성</h1>
    <p id="text"></p>

    <script>
        var regStr = /a+bc/;                // 정규 표현식 리터럴을 이용한 생성
        var regObj = new RegExp("a+bc");    // RegExp 객체를 이용한 생성
        document.getElementById("text").innerHTML = regStr + "<br>" + regObj;
   </script>        
</body>
</html>

실행 결과

JavaScript Regular Expression

정규 표현식의 생성

단순한 패턴 검색

정규 표현식을 사용하여 단순한 패턴을 검색하고자 할 때는 찾고자 하는 문자열을 직접 나열하면 된다. 예를 들어, 다음과 같은 정규 표현식은 정확히 "abc"라는 문자열만이 일치할 것이다.

🔔 예제)

/abc/

다음 예제는 정규 표현식을 이용한 단순한 패턴 검색 예제이다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Regular Expression</title>
</head>
<body>
    <h1>단순한 패턴 검색</h1>
    <p id="text"></p>

    <script>
        var targetStr = "간장 공장 공장장은 강 공장장이고, 된장 공장 공장장은 장 공장장이다."
        var strReg1 = /공장/;
        var strReg2 = /장공/;
        
        document.write(targetStr.search(strReg1) + "<br>");
        document.write(targetStr.search(strReg2));
   </script>        
</body>
</html>

실행 결과

JavaScript Regular Expression

단순한 패턴 검색

위의 예제에서 첫 번째 정규 표현식은 해당 문자열의 부분 문자열인 "공장"과 총 6번 일치합니다.

하지만 search() 메소드는 일치하는 문자열 중에서 첫 번째 문자열의 인덱스만을 반환한다.

위의 예제에서 두 번째 정규 표현식은 해당 문자열이 "장 공"이라는 부분 문자열은 포함하고 있지만, 정확히 "장공"이라는 부분 문자열을 포함하지 않으므로, 아무것도 일치하지 않는다.

search() 메소드는 해당 문자열에서 인수로 전달받은 정규 표현식과 일치하는 부분 문자열을 찾지 못하면 -1을 반환한다.

💡 TIP ? search() 메소드는 해당 문자열에서 인수로 전달받은 정규 표현식과 일치하는 첫 번째 문자열의 위치를 반환해주는 자바스크립트의 String 메소드이다.

플래그(flasgs)

정규 표현식을 생성할 때 플래그를 사용하여 기본 검색 설정을 변경할 수 있다. 이렇게 설정된 플래그는 나중에 추가되거나 삭제될 수 없다.

플래그(flag)	설명
i	검색 패턴을 비교할 때 대소문자를 구분하지 않도록 설정함
g	검색 패턴을 비교할 때 일치하는 모든 부분을 선택하도록 설정함
m	검색 패턴을 비교할 때 여러 줄의 입력 문자열을 그 상태 그대로 여러 줄로 비교하도록 설정함
y	대상 문자열의 현재 위치부터 비교를 시작하도록 설정함

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Regular Expression</title>
</head>

<body>
    <h1>정규 표현식의 플래그</h1>
    <p id="text"></p>

    <script>
        var targetStr = "bcabcAB";
        var strReg = /AB/;                // 검색 패턴 비교 시 기본 설정으로 대소문자를 구분함.
        var strUsingFlag = /AB/i;        // new RegExp("AB", "i")와 동일함.
        document.getElementById("text").innerHTML = targetStr.search(strReg) + "<br>" + targetStr.search(strUsingFlag);
   </sript>        
</body>
</html>

실행 결과

JavaScript Regular Expression

정규 표현식의 플래그

특수 문자(special characters)

정규 표현식을 사용하여 단순한 패턴을 검색하고자 할 때는 찾고자 하는 문자열을 직접 나열하면 된다. 하지만 숫자만을 검색하거나, 띄어쓰기를 찾는 등 정확히 일치하는 패턴보다 더 복잡한 조건을 사용하려면 특수 문자를 사용해야 한다.

자바스크립트 정규 표현식에서 사용할 수 있는 대표적인 특수 문자는 다음과 같다.

특수 문자	설명
\	역슬래시(\) 다음에 일반 문자가 나오면 이스케이프 문자로 해석하고, 특수 문자가 나오면 일반 문자로 해석함
\d	숫자를 검색함 /[0-9]/ 와 같음
\D	숫자가 아닌 문자를 검색함 /[^0-9]/ 와 같음
\w	언더스코어(_)를 포함한 영문자 및 숫자를 검색함 /[A-Za-Z0-9_]/ 와 같음
\W	언더스코어(_)를 포함한 영문자 및 숫자를 검색함 /[^A-Za-z0-9_]/ 와 같음
\s	띄어쓰기, 탭, 줄 바꿈 문자 등의 공백 문자를 검색함
\S	띄어쓰기, 탭, 줄 바꿈 문자 등의 공백 문자가 아닌 문자를 검색함
\b	단어의 맨 앞이나 맨 뒤가 패턴과 일치하는지를 검색함
\xhh	16진수에서 hh에 해당하는 유니코드 문자를 검색함
\uhhh	16진수 hhhh에 해당하는 유니코드 문자를 검색함

다음 예제는 특수 문자인 '＼d'를 사용한 정규 표현식 예제이다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Regular Expression</title>
</head>
<body>
    <h1>특수 문자 '\d'</h1>
    <p id="text"></p>

    <script>
        var text = document.getElementById("text");

        var targetStr = "ab1bc2cd3de";
        var reg1 = /\d/;            // 0부터 9까지의 숫자를 검색함.
        var reg2 = /[3-9]/;            // 3부터 9까지의 숫자를 검색함.
        
        text.innerHTML = targetStr.search(reg1) + "<br>";
        text.innerHTML += targetStr.search(reg2);
   </script>        
</body>
</html>

실행 결과

JavaScript Regular Expression

특수 문자 '\d'

위의 예제에서 첫 번째 정규 표현식은 0부터 9까지의 숫자인지를 검색한다. 이 정규 표현식은 "/[0-9]/" 와 같은 결과를 반환할 것이다. 두 번째 정규 표현식은 3부터 9까지의 숫자인지를 검색한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Regular Expression</title>
</head>
<body>
    <h1>특수 문자 '\s'와 '\w'</h1>
    <p id="text"></p>

    <script>
        var text = document.getElementById("text");

        var targetStr = "abc 123";
        // 공백 문자를 사이에 두는 언더스코어(_)를 포함한 영문자 및 숫자로 이루어진 문자열을 검색함.
        var reg = /\w\s\w/;
        
        text.innerHTML = targetStr.match(reg);
   </script>        
</body>
</html>

실행 결과

JavaScript Regular Expression

특수 문자 '\s'와 '\w'

위의 예제에서 사용된 정규 표현식은 첫 번째 문자로 언더스코어(_)를 포함한 영문자 및 숫자를 검색한다.

두 번째 문자로는 띄어쓰기를 포함한 탭(tab), 줄 바꿈 문자 등의 공백 문자를 검색한다.

마지막 세 번째 문자로 다시 언더스코어(_)를 포함한 영문자 및 숫자를 검색한다.

이처럼 특수 문자를 나열하여 각각의 조건에 해당하는 문자로 이루어진 부분 문자열을 검색할 수 있다.

💡 TIP ? match() 메소드는 해당 문자열에서 인수로 전달받은 정규 표현식과 일치하는 문자열을 모두 찾아서 하나의 배열로 반환해주는 자바스크립트의 String 메소드이다.

다음 예제는 특수 문자인 '＼b'를 사용한 정규 표현식 예제이다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Regular Expression</title>
</head>
<body>
    <h1>특수 문자 '\b'</h1>
    <p id="text"></p>

    <script>
        var text = document.getElementById("text");

        var targetStr1 = "abc123abc";
        var targetStr2 = "abc 123 abc";
        var targetStr3 = "abc@123!abc";
        
        // 단어의 맨 앞이나 맨 뒤에 부분 문자열 "bc"가 존재하는지를 검색함.
        var reg = /bc\b/;
        
        text.innerHTML = targetStr1.search(reg) + "<br>";
        text.innerHTML += targetStr2.search(reg) + "<br>";
        text.innerHTML += targetStr3.search(reg);
   </script>        
</body>
</html>

실행 결과

JavaScript Regular Expression

특수 문자 '\b'

특수 문자 '＼b'를 사용한 정규 표현식은 단어의 맨 앞이나 맨 뒤가 패턴과 일치하는지를 검색한다.

위의 예제에서 첫 번째 정규 표현식은 해당 문자열을 단 하나의 단어로 인식하고, 양 끝에 위치한 패턴을 검색한다.

하지만 두 번째 세 번째 정규 표현식은 해당 문자열을 여러 개의 단어로 인식하고, 모든 단어에 대해 패턴을 검색할 것이다.

💡 TIP ? 자바스크립트에서는 언더스코어(_)와 영문자, 숫자만을 단어에 포함될 수 있는 문자로 인식한다. 따라서 이 외의 모든 문자는 문자열에서 단어를 구분하는 문자(word break)로 인식될 것이다.

양화사(quantifier)

정규 표현식에서는 특수 문자로 수량을 나타내는 다양한 양화사를 사용할 수 있다.

괄호	설명
n*	바로 앞의 문자가 0번 이상 나타나는 경우를 검색함 /{0,}/ 와 같음
n+	바로 앞의 문자가 1번이상 나타나는 경우를 검색함 /{1,}/ 과 같음
n?	바로 앞의 문자가 0번 또는 1번만 나타나는 경우를 검색함 /{0, 1}/ 과 같음

또한, 물음표(?) 기호가 정규 표현식의 양화사(*,+,?,{}) 바로 다음에 위치하게 되면, 가능한 많은 문자를 가지도록 패턴을 찾는 기본 설정과는 달리 해당 양화사가 가능한 적은 수의 문자만을 가지는 패턴을 찾도록 변경시킨다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Regular Expression</title>
</head>
<body>
    <h1>정규 표현식의 양화사</h1>
    <p id="text"></p>

    <script>
        var targetStr = "123abc";
        var oneReg = /\d+/;            // 숫자를 검색함. [0-9]와 같음.
        var anotherReg = /\d+?/;    // 숫자를 검색하지만, 가능한 적은 수의 문자를 가지는 패턴을 검색함.
        document.getElementById("text").innerHTML = targetStr.match(oneReg) + "<br>" + targetStr.match(anotherReg);
   </script>        
</body>
</html>

실행 결과

JavaScript Regular Expression

정규 표현식의 양화사

위의 예제에서 첫 번째 정규 표현식은 하나 이상의 숫자만을 검색하므로, 문자열 "123abc"에서 가능한 많은 문자를 가지도록 "123"을 검색한다. 하지만 두 번째 정규 표현식처럼 바로 뒤에 물음표(?) 기호를 추가하면, 가능한 적은 문자를 가지도록 변경되므로, "1"만을 검색하게 된다.

괄호(bracket)

정규 표현식에서 사용할 수 있는 여러가지 괄호의 의미는 다음과 같다.

괄호	설명
a(b)c	전체 패턴을 검색한 후에 괄호 안에 명시된 문자열을 저장함 (ex : "abc"를 검색한 후에 b를 저장함)
[abc]	꺽쇠 괄호 ([]) 안에 명시된 문자를 검색함 (ex : "abc"를 검색함)
[0-3]	꺽쇠 괄호 ([]) 안에 명시된 숫자를 검색함 (ex : 0부터 3까지의 숫자를 검색함)
[\b]	백스페이스 문자를 검색함
{n}	앞의 문자가 정확히 n번 나타나는 경우를 검색함. n은 반드시 양의 정수이어야만 함
{m,n}	앞의 문자가 최소 m번 이상 최대 n번 이하로 나타나는 경우를 검색함. m과 n은 반드시 양의 정수이어야만 함

💡 TIP ? \b는 단어의 맨 앞이나 맨 뒤가 패턴과 일치하는지를 검색하는 특수 문자이고, [\b]는 백스페이스 문자를 검색하는 정규표현식이다. 이 둘을 혼동해서는 안된다.

다음 예제는 괄호(())를 사용하여 패턴을 검색하고 해당 패턴을 저장하여, 위치를 변경시키는 예제이다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Regular Expression</title>
</head>
<body>
    <h1>정규 표현식의 괄호</h1>
    <p id="text"></p>

    <script>
        var targetStr = "Hong Gil Dong";
        var nameReg = /(\w+)\s(\w+)\s(\w+)/;                    // 공백 문자를 기준으로 각 부분 문자열을 저장함.
        var engName = targetStr.replace(nameReg, "$2 $3 $1");    // 첫 번째 부분 문자열을 맨 마지막으로 위치시킴.
        document.getElementById("text").innerHTML = engName;
   </script>        
</body>
</html>

실행 결과

JavaScript Regular Expression

정규 표현식의 괄호

위의 예제에서 괄호로 묶여진 정규 표현식으로 검색되는 세 개의 부분 문자열은 차례대로 저장된다.

이때 replace() 메소드에서는 이렇게 저장된 부분 문자열을 $1, $2, ..., $n 표현을 이용하여 사용할 수 있다.

💡 TIP ? 정규 표현식에서 사용되는 괄호(())를 "capturing parentheses" 라고도 부른다.

이렇게 저장된 부분 문자열은 replace() 메소드에서 사용할 수도 있지만, 정규 표현식 내부에서 바로 사용할 수도 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Regular Expression</title>
</head>
<body>
    <h1>정규 표현식의 괄호</h1>
    <p id="text"></p>

    <script>
        var targetStr = "abc 123 abc 123";
        var oneReg = /(\w+) (\d+)/;                // abc 123, abc, 123
        var anotherReg = /(\w+) (\d+) \1 \2/;    // abc 123 abc 123, abc, 123
        document.getElementById("text").innerHTML =
            targetStr.match(oneReg) + "<br>" + targetStr.match(anotherReg);
   </script>        
</body>
</html>

실행 결과

JavaScript Regular Expression

정규 표현식의 괄호

위의 예제에서 첫 번째 정규 표현식은 언더스코어(_)를 포함한 영문자 및 숫자로 이루어진 한 부분 문자열과 띄어쓰기로 구분되는 숫자로 이루어진 또 다른 부분 문자열을 검색한다. 따라서 해당 문자열에서는 각각 첫 번째 "abc"와 "123"이 검색되어 저장된다.

하지만 두 번째 정규 표현식에서는 위와 같은 방법으로 저장된 부분 문자열을 정규 표현식 내에서 또다시 사용하고 있다. 이때 정규 표현식 내에서는 ＼1, ＼2, ..., ＼n 표현을 이용하여 저장된 부분 문자열을 사용할 수 있다.

💡 TIP ? match() 메소드는 정규 표현식과 모두 일치하는 부분 문자열뿐만 아니라, 괄호를 사용하여 저장된 부분 문자 열도 함께 반환한다.

위치 문자

정규 표현식에서는 패턴을 검색할 단어의 위치를 지정할 수 있다.

괄호	설명
^a	단어의 맨 앞에 위치한 해당 패턴만을 검색함 (ex : 'a'로 시작하는 'a'만을 검색함)
a$	단어의 맨 뒤에 위치한 해당 패턴만을 검색함 (ex : 'a'로 끝나는 단어의 'a'만을 검색함)

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Regular Expression</title>
</head>
<body>
    <h1>정규 표현식의 위치 문자</h1>
    <p id="text"></p>

    <script>
        var firstStr = "Php";
        var secondStr = "phP";
        var strReg = /^p/;            // 단어의 맨 처음에 문자 'p'가 나타나는 경우를 검색함.
        document.getElementById("text").innerHTML = 
            firstStr.match(strReg) + "<br>" + secondStr.match(strReg);
   </script>        
</body>
</html>

실행 결과

JavaScript Regular Expression

정규 표현식의 위치 문자

RegExp 객체

RegExp 객체는 정규 표현식을 구현한 자바스크립트 표준 내장 객체이다.

RegExp 객체를 생성하는 문법은 다음과 같다.

문법

new RegExp(검색패턴[, 플래그]);

검색 패턴을 나타내는 정규 표현식은 따옴표나 슬래시(/)로 감싸야 한다.
기본 검색 설정을 변경할 수 있는 플래그는 필요할 때만 전달할 수 있다.

RegExp.prototype 메소드

모든 RegExp 인스턴스는 RegExp.prototype 으로 부터 메소드와 프로퍼티를 상속받는다.

이렇게 상속받은 RegExp.prototype 메소드를 사용하여 정규 표현식을 표현할 수 있다.

RegExp.prototype.exec()
RegExp.prototype.test()

exec() 메소드

exec() 메소드는 인수로 전달된 문자열에서 특정 패턴을 검색하여, 패턴과 일치하는 문자열을 반환한다.

만약에 패턴과 일치하는 문자열이 없으면 null을 반환한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript RegExp Object</title>
</head>
<body>
    <h1>exec() 메소드</h1>
    <p id="text"></p>

    <script>
        var targetStr = "abbcdefabgh";
        var firstResult = /ab+/.exec(targetStr);        // 패턴과 일치하는 문자열이 여러 개인 경우
        var secondResult = /abbb+/.exec(targetStr);        // 패턴과 일치하는 문자열이 하나도 없는 경우
        document.getElementById("text").innerHTML = firstResult + "<br>" + secondResult;
   </script>        
</body>
</html>

실행 결과

JavaScript RegExp Object

exec() 메소드

test() 메소드

test() 메소드는 인수로 전달된 문자열에 특정 패턴과 일치하는 문자열이 있는지를 검색한다. 만약에 패턴과 일치하는 문자열이 있으면 true를 없으면 false를 반환한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript RegExp Object</title>
</head>
<body>
    <h1>test() 메소드</h1>
    <p id="text"></p>

    <script>
        var targetStr = "abbcdefabgh";
        var firstResult = /ab+/.test(targetStr);        // 패턴과 일치하는 문자열이 여러 개인 경우
        var secondResult = /abbb+/.test(targetStr);        // 패턴과 일치하는 문자열이 하나도 없는 경우
        document.getElementById("text").innerHTML = firstResult + "<br>" + secondResult;
   </script>        
</body>
</html>

실행 결과

JavaScript RegExp Object

test() 메소드

자바스크립트 RegExp.prototype 메소드

메소드	설명
exec()	인수로 전달된 문자열에서 특정 패턴을 검색하여, 패턴과 일치하는 문자열을 반환함
test()	인수로 전달된 문자열에 특정 패턴과 일치하는 문자열이 있는지를 검색하여, 그 결과를 불리언 값으로 반환함
toString()	RegExp 객체의 정규 표현식과 같은 의미를 가지는 정규 표현식 리터럴 문자열을 반환함

RegExp.prototype 프로퍼티

자바스크립트는 정규 표현식에서 사용하는 다양한 정보를 RegExp.prototype 프로퍼티를 이용해 제공하고 있다.

RegExp.prototype.globa
RegExp.prototype.ignoreCase
RegExp.prototype.multiline
RegExp.prototype.source

자바스크립트 RegExp.prototype 프로퍼티

프로퍼티	설명
global	검색 패턴을 비교할 때 일치하는 모든 부분을 선택하도록 설정하는 플래그인 'g'를 가리킴
ignoreCase	검색 패턴을 비교할 때 대소문자를 구분하지 않도록 설정하는 플래그인 'i'를 가리킴
multiline	검색 패턴을 비교할 때 여러 줄의 입력 문자열을 그 상태 그대로 여로 줄로 비교하도록 설정하는 플래그인 'm'을 가리킴
source	검색 패턴이 포함하고 있는 문자열을 가리킴

728x90

저작자표시 비영리 변경금지

'Language > JavaScript' 카테고리의 다른 글

[JavaScript] 예외 처리 / Strict 모드 (0)	2018.10.23
[JavaScript] 이벤트 (0)	2018.10.22
[JavaScript] Navigator 객체 / 대화 상자 / 타이머 (0)	2018.10.22
[JavaScript] Location 객체 / History 객체 / Screen 객체 (0)	2018.10.22
[JavaScript] Window 객체 (0)	2018.10.22

Embedded Software Embedded Software

정규 표현식(regular expression)이란 ?

정규 표현식의 생성

정규 표현식의 생성

단순한 패턴 검색

단순한 패턴 검색

플래그(flasgs)

정규 표현식의 플래그

특수 문자(special characters)

특수 문자 '\d'

특수 문자 '\s'와 '\w'

특수 문자 '\b'

양화사(quantifier)

정규 표현식의 양화사

괄호(bracket)

정규 표현식의 괄호

정규 표현식의 괄호

위치 문자

정규 표현식의 위치 문자

RegExp 객체

RegExp.prototype 메소드

exec() 메소드

exec() 메소드

test() 메소드

test() 메소드

자바스크립트 RegExp.prototype 메소드

RegExp.prototype 프로퍼티

자바스크립트 RegExp.prototype 프로퍼티

'Language > JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바