JavaScript 正则表达式：前端开发必备 – wiki大全

Here’s an outline for an article titled “JavaScript Regular Expressions: Frontend Development Essentials”:

---

JavaScript Regular Expressions: Frontend Development Essentials

I. Introduction

• What are Regular Expressions (Regex)?
  • A powerful tool for pattern matching in strings.
  • Brief history and concept.
• Why are Regex Essential for Frontend Developers?
  • Data validation.
  • Text manipulation and parsing.
  • Search and replace functionality.
  • Improving user experience (UX) and data integrity.

II. The Basics: Creating and Using Regular Expressions in JavaScript

• Literal Notation:
  javascript
const regexLiteral = /pattern/flags;
• RegExp Constructor:
  javascript
const regexConstructor = new RegExp("pattern", "flags");
• Flags:
  • g (global): Find all matches, not just the first.
  • i (case-insensitive): Ignore case.
  • m (multiline): Treat beginning and end anchors (^ and $) as working on each line.
  • u (unicode): Enable full Unicode support.
  • s (dotAll): Allows . to match newline characters.

III. Fundamental Regex Syntax Elements

• Character Classes:
  • . (any character except newline)
  • \d (digit), \D (non-digit)
  • \w (word character: a-z, A-Z, 0-9, _), \W (non-word character)
  • \s (whitespace), \S (non-whitespace)
  • [abc] (any character in the set)
  • [^abc] (any character NOT in the set)
  • [a-z] (range)
• Quantifiers:
  • + (one or more)
  • * (zero or more)
  • ? (zero or one)
  • {n} (exactly n times)
  • {n,} (at least n times)
  • {n,m} (between n and m times)
• Anchors:
  • ^ (start of string/line)
  • $ (end of string/line)
  • \b (word boundary), \B (non-word boundary)
• Grouping and Alternation:
  • (pattern) (capturing group)
  • (?:pattern) (non-capturing group)
  • | (OR operator)
  • Example: (cat|dog)
• Escaping Special Characters:
  • \ before special characters like ., *, +, ?, (, ), [, ], {, }, ^, $, |, \.

IV. JavaScript String Methods Using Regex

• String.prototype.match():
  • Returns an array of all matches, or null.
  • Example: const result = "Hello world".match(/o/g); // ["o", "o"]
• String.prototype.search():
  • Returns the index of the first match, or -1.
  • Example: const index = "Hello world".search(/world/); // 6
• String.prototype.replace():
  • Replaces matches with a replacement string or the result of a function.
  • Example: const newString = "Hello world".replace(/o/g, "x"); // "Hellx wxrld"
  • Using capture groups in replacement: "$1-$2"
• String.prototype.split():
  • Splits a string into an array of substrings using a regex as a delimiter.
  • Example: const parts = "apple,banana;orange".split(/[,;]/); // ["apple", "banana", "orange"]
• RegExp.prototype.test():
  • Returns true if there is at least one match, false otherwise.
  • Example: const isValid = /email/.test("[email protected]"); // true
• RegExp.prototype.exec():
  • Returns an array containing the match and capturing groups, or null. Useful for iterating over global matches.
  • Example:
    javascript
const re = /quick\s(brown).+?(jumps)/gi;
const str = 'The Quick Brown Fox Jumps over the lazy dog.';
let match;
while ((match = re.exec(str)) !== null) {
console.log(`Found ${match[0]}. Next match starts at ${re.lastIndex}`);
console.log(`Captures: ${match[1]}, ${match[2]}`);
}

V. Practical Frontend Use Cases

• Form Validation:
  • Email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  • Phone Number: /^\(?(\d{3})\)?[-.\s]?(\d{3})[-.\s]?(\d{4})$/ (for US format)
  • Password Strength: Combining lookaheads for special characters, numbers, uppercase, lowercase.
    • Example: ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$ (min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special char)
  • Date Formats: /^\d{4}-\d{2}-\d{2}$/ (YYYY-MM-DD)
• Input Masking/Formatting:
  • Automatically adding hyphens to phone numbers.
  • Formatting credit card numbers.
• URL Parsing and Manipulation:
  • Extracting parameters from a query string.
  • Validating URLs.
  • Example: const url = "https://example.com/path?param1=value1&param2=value2";
  • const params = url.match(/[?&]([^=&]+)=([^&]*)/g);
• Search and Highlight Text:
  • Dynamically highlighting search terms on a webpage.
  • Replacing specific words with formatted text (e.g., bolding keywords).
• Sanitizing User Input:
  • Removing unwanted characters or HTML tags.
  • Example: const cleanText = userInput.replace(/<script.*?>.*?<\/script>/gi, "");
• Routing in Single Page Applications (SPAs):
  • Matching URL paths to components (though modern routers often handle this, regex can be used for advanced patterns).

VI. Advanced Concepts (Briefly)

• Lookaheads and Lookbehinds: Assertions that check for patterns without consuming characters.
  • (?=pattern) (positive lookahead)
  • (?!pattern) (negative lookahead)
  • (?<=pattern) (positive lookbehind)
  • (?<!pattern) (negative lookbehind)
• Non-Capturing Groups ((?:...)): Grouping without creating a backreference, useful for optimization.

VII. Best Practices and Tips

• Keep it Simple: Complex regex can be hard to read and maintain. Break down if possible.
• Test Thoroughly: Use online regex testers (e.g., regex101.com, regexr.com) and write unit tests.
• Performance Considerations:
  • Avoid excessive backtracking (e.g., nested quantifiers like (a+)+).
  • Be specific with character classes.
  • Prefer ^ and $ for anchoring when possible.
• Readability: Add comments if needed (though not directly in JS regex).
• Context Matters: Understand the data you are matching against.

VIII. Conclusion

• Recap of regex’s power and importance in frontend development.
• Encouragement for further learning and practice.

---