[TCP School/자바스크립트] 정규 표현식 - 정규 표현식의 응용

2023. 4. 27. 13:35

특수 문자

정규 표현식을 사용하여 단순한 패턴을 검색하고자 할 때는 찾고자 하는 문자열을 직접 나열하면 된다.

하지만 숫자만을 검색하거나, 띄어쓰기를 찾는 등 정확히 일치하는 패턴보다 더 복잡한 조건을 사용하려면 특수 문자를 사용해야 한다.

 

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

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

 

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

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

        var targetStr = 'ab1bc2cd3de';
        var reg1 = /\d/;
        var reg2 = /[3-9]/;

        text.innerHTML = targetStr.search(reg1) + '<br>';
        text.innerHTML += targetStr.search(reg2);
    </script>
</body>
</html>

 

위 예제에서 첫 번째 정규 표현식은 0부터 9까지의 숫자인지를 검색한다.

두 번째 정규 표현식은 3부터 9까지의 숫자인지를 검색한다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>\s, \w</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>

 

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

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

마지막 세 번째 문자는 첫 번째 문자와 같다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>\b</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';

        var reg = /bc\b/;

        text.innerHTML = targetStr1.search(reg) + '<br>';
        text.innerHTML += targetStr2.search(reg) + '<br>';
        text.innerHTML += targetStr3.search(reg);
    </script>
</body>
</html>

 

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

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

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

 

자바스크립트에서는 언더스코어(_)와 영문자, 숫자만을 단어에 포함할 수 있는 문자로 인식한다.

따라서 이 외의 모든 문자는 문자열에서 단어를 구분하는 문자로 인식된다.

양화사(quantifier)

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

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

 

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

    <script>
        var targetStr = 'Hello World!';
        var zeroReg = /lo*/;
        var oneReg = /lo+/;
        var zeroOneReg = /lo?/;

        document.getElementById('text').innerHTML = targetStr.search(zeroReg) + '<br>' + targetStr.search(oneReg) + '<br>' + targetStr.search(zeroOneReg);
    </script>
</body>
</html>

 

 

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

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

    <script>
        var targetStr = '123abc';
        var oneReg = /\d+/;
        var anotherReg = /\d+?/;

        document.getElementById('text').innerHTML = targetStr.match(oneReg) + '<br>' + targetStr.match(anotherReg);
    </script>
</body>
</html>

 

위 예제에서 첫 번째 정규 표현식은 하나 이상의 숫자만을 검색하므로, 문자열 '123abc'에서 가능한 많은 문자를 가지도록 '123'을 검색한다.

하지만 두 번째 정규 표현식처럼 바로 뒤에 물음표 기호를 추가하면, 가능한 적은 문자를 가지도록 변경되므로, '1'만 검색하게 된다.

괄호(bracket)

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

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

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>bracket</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>

 

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

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

 

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

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

    <script>
        var targetStr = 'abc 123 abc 123';
        var oneReg = /(\w+) (\d+)/;
        var anotherReg = /(\w+) (\d+) \1 \2/;

        document.getElementById('text').innerHTML = targetStr.match(oneReg) + '<br>' + targetStr.match(anotherReg);
    </script>
</body>
</html>

 

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

따라서 해당 문자열에서는 각각 첫 번째 'abc'와 '123'이 검색되어 저장된다.

하지만 두 번째 정규 표현식에서는 위와 같은 방법으로 저장된 부분 문자열을 정규 표현식 내에서 다시 사용하고 있다.

이 때 정규 표현식 내에서는 \1, \2, \3, ... 표현을 사용하여 저장된 부분 문자열을 다시 사용할 수 있다.

위치 문자

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

괄호 설명
^a 단어의 가장 앞에 위치한 해당 패턴만을 검색
a$ 단어의 가장 뒤에 위치한 해당 패턴만을 검색

 

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

    <script>
        var firstStr = 'Php';
        var secondStr = 'phP';
        var strReg = /^p/;

        document.getElementById('text').innerHTML = firstStr.match(strReg) + '<br>' + secondStr.match(strReg);
    </script>
</body>
</html>

 

TCP School의 강의 내용을 정리한 포스트입니다.

http://www.tcpschool.com/javascript/intro

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

'공부 > JavaScript' 카테고리의 다른 글

화살표 함수  (0) 2023.05.02
[TCP School/자바스크립트] 정규 표현식 - RegExp 객체  (0) 2023.04.27
[TCP School/자바스크립트] 정규 표현식 - 정규 표현식의 개념  (0) 2023.04.27
[TCP School/자바스크립트] 예외 처리 - Strict 모드  (0) 2023.04.27
[TCP School/자바스크립트] 예외 처리  (0) 2023.04.27

BELATED ARTICLES

more

티스토리툴바