Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
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.
Advertisements
