Introduction too Regular Expressions
Regular expressions (regex) are powerful patterns composed of special characters that enable searching, matching, and manipulating text based on specific rules. These versatile tools are essential for form validation, URL routing, text processing, and data extraction in modern web development.
Essential Regular Expression Patterns
Below is a collection of useful regex patterns for common validation scenarios:
- Numeric-only input:
^[0-9]*$ - Fixed-length numeric (n digits):
^\d{n}$ - Minimum-length numeric (at least n digits):
^\d{n,}$ - Range-length numeric (m to n digits):
^\d{m,n}$ - Numbers starting with zero or non-zero:
^(0|[1-9][0-9]*)$ - Positive real numbers with exact 2 decimal places:
^[1-9]\d*(\.\d{2})?$ - Positive real numbers with 1-3 decimal places:
^[1-9]\d*(\.\d{1,3})?$ - Positive integers only (no zero):
^[1-9]\d*$ - Negative integers only (no zero):
^-[1-9]\d*$ - Fixed-length text (3 characters):
^.{3}$ - Alphabetic strings only:
^[A-Za-z]+$ - Uppercase alphabetic strings only:
^[A-Z]+$ - Lowercase alphabetic strings only:
^[a-z]+$ - Alphanumeric strings only:
^[A-Za-z0-9]+$ - Alphanumeric with underscores:
^\w+$ - Password validation:
^[a-zA-Z]\w{5,17}$(must start with a leter, 6-18 characters, alphanumeric with underscores) - Special characters detection:
[%&',;=?$\\"]+ - Chinese characters only:
^[\u4e00-\u9fa5]+$ - Email validation:
^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z0-9_.-])+$ - URL validation:
^(http|https)://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ - Phone number validation:
^(\d{3,4}-?)?\d{7,8}$(formats: XXX-XXXXXXX, XXX-XXXXXXXX, XXXXXXX, XXXXXXXX) - ID card validation (15 or 18 digits):
^\d{15}|\d{18}$ - Month validation (01-12):
^(0?[1-9]|1[0-2])$ - Day validation (01-31):
^((0?[1-9])|((1|2)[0-9])|30|31)$
Implementing Input Restrictions with Regular Expressions
Here are modern approaches to restricting user input in web forms using regular expressions:
Chinese Characters Only
// Using input event for real-time validation
document.getElementById('chineseInput').addEventListener('input', function(e) {
e.target.value = e.target.value.replace(/[^\u4e00-\u9fa5]/g, '');
});
// Alternative using HTML5 pattern attribute
<input type="text" pattern="[\u4e00-\u9fa5]+" title="Please enter Chinese characters only">
Full-width Characters Only
// Input event handler for full-width characters
document.getElementById('fullWidthInput').addEventListener('input', function(e) {
e.target.value = e.target.value.replace(/[^\uFF00-\uFFFF]/g, '');
});
// Using HTML5 pattern
<input type="text" pattern="[\uFF00-\uFFFF]+" title="Please enter full-width characters only">
Numeric Input Only
document.getElementById('numericInput').addEventListener('input', function(e) {
e.target.value = e.target.value.replace(/\D/g, '');
});
// HTML5 number input (preferred approach)
<input type="number" inputmode="numeric">
Alphanumeric Input Only
document.getElementById('alphanumericInput').addEventListener('input', function(e) {
e.target.value = e.target.value.replace(/[^A-Za-z0-9]/g, '');
});
// HTML5 pattern approach
<input type="text" pattern="[A-Za-z0-9]+" title="Please enter letters and numbers only">
Extracting Filename from URL
function extractFilenameFromUrl(url) {
const match = url.match(/\/([^\/?#]+)[^\/]*$/);
return match ? match[1] : '';
}
// Example usage
const url = 'https://example.com/path/to/page1.html';
const filename = extractFilenameFromUrl(url); // Returns "page1.html"