JavaScript 정규식으로 ABC-1234 형식 만들기

정규식(Regular Expression)을 활용하면 ABC1234처럼 붙어 있는 문자열을 ABC-1234 형태로 손쉽게 변환할 수 있습니다. 아래는 jQuery와 정규식을 조합해 이를 구현한 JavaScript 예제 코드입니다.

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p class="formatting">ABC1234</p>
<script>
    function joinTheDashSymbol(m, r1,r2,r3,r4,r5) {
        if (r1)
            return [r1,r2,r3].join('-');
        else
            return [r4,r5].join('-');
    }
    $(".formatting").text(function(i, words) {
        words = words.replace(/^(\d{3})(\d{3})(\d{4})|([A-Z]{3})(\d{4})$/, joinTheDashSymbol);
        return words;
    });
</script>
</body>
</html>

코드 실행 방법

위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하면 됩니다. Live Server 확장 프로그램이 설치되어 있지 않다면, VS Code 확장 마켓플레이스에서 먼저 설치해 주세요.

실행 결과

JavaScript 정규식으로 ABC-1234 형식 만들기 – 예제 코드 완벽 정리

페이지가 로드되면 화면에 표시된 ABC1234 텍스트가 자동으로 ABC-1234로 변경됩니다.

정규식 패턴 상세 설명

이 코드의 핵심은 다음 정규식 패턴입니다.

/^(\d{3})(\d{3})(\d{4})|([A-Z]{3})(\d{4})$/

(\d{3})(\d{3})(\d{4}) : 숫자 3자리 + 3자리 + 4자리로 구성된 10자리 숫자(전화번호 등)를 매칭합니다. 매칭되면 각 그룹이 하이픈(-)으로 연결되어 반환됩니다.
([A-Z]{3})(\d{4}) : 대문자 3개 뒤에 숫자 4개가 이어지는 형식(예: ABC1234)을 매칭하여 ABC-1234로 변환합니다.
joinTheDashSymbol 콜백 함수는 replace() 메서드가 매칭한 각 캡처 그룹(r1~r5)을 인자로 받아, 첫 번째 패턴이 일치했으면 r1~r3을, 두 번째 패턴이 일치했으면 r4~r5를 하이픈으로 연결한 문자열을 반환합니다.

이처럼 정규식의 캡처 그룹과 replace() 메서드의 콜백 함수를 함께 사용하면, 복잡한 문자열 포맷팅 작업도 몇 줄의 코드로 깔끔하게 처리할 수 있습니다.