JAVASCRIPT 알파벳, 숫자 정규표현식 사용 방법

알지만 정확하지 않아 항상 찾게 되는 JAVSCRIPT 특수문자, 숫자 등 정규표현식 사용방법에 대해 작성해보려고 한다. 프로젝트를 진행하거나 업무로 인하여 알파벳, 숫자 또는 특수문자 등을 찾아야하거나 제거를 할 때 주로 사용되는 정규표현식이다.

보통 이용자가 입력한 값이 정상적인 값인지, 아니면 전혀 다른 값이 입력되었는지 확인하기 위하여다. 예를 들어 이용자의 휴대폰 번호와 이름으로 어떤 시스템에 인증을 하여야 하는데, 이름에 휴대폰 번호가 입력이 되고 휴대폰 번호에는 이름이 입력이 되었을 때 이 입력된 값을 체크하여 이용자에게 다시 알려주면 되는 것이다.

정규표현식이란?

정규표현식이란 정규식으로도 불리며 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 앞서 설명했던 것과 같이 패턴이 있는 어떤 특정한 규칙이 필요할 경우 사용할 수 있으며, 사용하는 언어에 맞게 사용할 수 있다.

JAVASCRIPT 알파벳, 숫자 정규표현식 사용 방법

JAVASCRIPT 알파벳 정규표현식

var orgText = "Hi hello 12345 안녕하세요";
var regex = /[^a-zA-Z]/g;
var result = orgText.replace(regex, "");

console.log(result);   // => 'Hihello'로 출력

위 처럼 정규표현식을 a-z 그리고 A-Z로 표현을 해준다면 결과는 어떻게 나올까? 정답은 orgText의 문자열 중 알파벳 소문자, 대문자를 제외한 모든 문자는 “”(공백)으로 replace를 시킨다. 결과는 아래 이미지를 확인해 보자.


JAVASCRIPT 숫자 정규표현식

그럼 숫자만 입력이 되어야하는 모바일, 생년월일 등을 입력하고자 할때 아래와 같이 처리하면 된다.

var orgText = "Hi hello 12345 안녕하세요";
var regex = /[^0-9]/g;
var result = orgText.replace(regex, "");

console.log(result);   // => '12345'로 출력

테스트 코드 참고

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <h1>Javascript 정규표현식(정규식)</h1>
    
    var orgText = "Hi hello 12345 안녕하세요";<br />
    var regex = /[^0-9]/g;<br />
    var result = testString.replace(regex, "");<br /><br />

    <button onclick="doCheck()">정규표현식</button>

    <h2>결과</h2>
    <div id="result"></div>

    <script>
        function doCheck() {

            var orgText = "Hi hello 12345 안녕하세요";
            var regex = /[^0-9]/g;
            //var regex = /[^a-zA-Z]/g;
            var result = orgText.replace(regex, "");

            $("#result").html(result);

        }  
    </script>
    
</body>
</html>

Leave a Comment