How to make Format ABC-1234 in JavaScript regular Expressions?

In JavaScript, you can format strings to match the pattern ABC-1234 using regular expressions. This pattern consists of three uppercase letters followed by a dash and four digits.

Understanding the Pattern

The ABC-1234 format requires:

  • Three uppercase letters (A-Z)
  • A dash (-)
  • Four digits (0-9)

Regular Expression Pattern

The regex pattern for ABC-1234 format is:

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

Breaking down this pattern:

  • ^ - Start of string
  • [A-Z]{3} - Exactly 3 uppercase letters
  • - - Literal dash character
  • \d{4} - Exactly 4 digits
  • $ - End of string

Method 1: Validating ABC-1234 Format

<!DOCTYPE html>
<html>
<head>
    <title>ABC-1234 Validation</title>
</head>
<body>
    <script>
        function validateFormat(input) {
            const pattern = /^[A-Z]{3}-\d{4}$/;
            return pattern.test(input);
        }
        
        // Test cases
        const testCases = ['ABC-1234', 'XYZ-5678', 'abc-1234', 'AB-123', 'ABCD-12345'];
        
        testCases.forEach(test => {
            const isValid = validateFormat(test);
            document.write(test + ': ' + (isValid ? 'Valid' : 'Invalid') + '<br>');
        });
    </script>
</body>
</html>

Method 2: Converting ABC1234 to ABC-1234

<!DOCTYPE html>
<html>
<head>
    <title>Format Conversion</title>
</head>
<body>
    <p id="original">ABC1234</p>
    <p id="formatted"></p>
    
    <script>
        function formatToABC1234(input) {
            // Match 3 letters followed by 4 digits, then insert dash
            return input.replace(/^([A-Z]{3})(\d{4})$/, '$1-$2');
        }
        
        const original = document.getElementById('original').textContent;
        const formatted = formatToABC1234(original);
        
        document.getElementById('formatted').textContent = 'Formatted: ' + formatted;
        document.write('Original: ' + original + '<br>');
        document.write('Formatted: ' + formatted);
    </script>
</body>
</html>

Method 3: Interactive Input Formatter

<!DOCTYPE html>
<html>
<head>
    <title>Interactive Formatter</title>
</head>
<body>
    <input type="text" id="userInput" placeholder="Enter format like ABC1234" maxlength="7">
    <button onclick="formatInput()">Format</button>
    <p id="result"></p>
    
    <script>
        function formatInput() {
            const input = document.getElementById('userInput').value.toUpperCase();
            const result = document.getElementById('result');
            
            // Check if input matches ABC1234 pattern
            if (/^[A-Z]{3}\d{4}$/.test(input)) {
                const formatted = input.replace(/^([A-Z]{3})(\d{4})$/, '$1-$2');
                result.textContent = 'Formatted: ' + formatted;
                result.style.color = 'green';
            } else {
                result.textContent = 'Invalid format. Use ABC1234 pattern.';
                result.style.color = 'red';
            }
        }
    </script>
</body>
</html>

Key Points

  • test() method checks if string matches the pattern
  • replace() with capture groups ($1, $2) reformats strings
  • Case sensitivity matters - use toUpperCase() for consistent formatting
  • Always validate input before formatting

Conclusion

Regular expressions provide powerful pattern matching for the ABC-1234 format. Use /^[A-Z]{3}-\d{4}$/ for validation and capture groups with replace() for formatting transformations.

Updated on: 2026-03-15T23:18:59+05:30

349 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements