Mastering JavaScript Regular Expressions

// Using literal notation (preferred for static patterns)
const regex1 = /pattern/flags;

// Using the RegExp constructor (useful when pattern is dynamic)
const regex2 = new RegExp("pattern", "flags");

// Greedy matching
"<div>Hello</div><div>World</div>".match(/<div>.*<\/div>/);
// Returns: "<div>Hello</div><div>World</div>"

// Lazy matching
"<div>Hello</div><div>World</div>".match(/<div>.*?<\/div>/);
// Returns: "<div>Hello</div>"

const regex = /(\d{3})-(\d{3})-(\d{4})/;
const match = "123-456-7890".match(regex);
// match[0] = "123-456-7890" (full match)
// match[1] = "123" (first group)
// match[2] = "456" (second group)
// match[3] = "7890" (third group)

const regex = /(?<areaCode>\d{3})-(?<prefix>\d{3})-(?<lineNumber>\d{4})/;
const match = "123-456-7890".match(regex);
// match.groups.areaCode = "123"
// match.groups.prefix = "456"
// match.groups.lineNumber = "7890"

// Form validation with regex
document.getElementById('registrationForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const name = document.getElementById('fullName').value;
  const email = document.getElementById('userEmail').value;
  const phone = document.getElementById('userPhone').value;
  const password = document.getElementById('userPassword').value;
  const website = document.getElementById('website').value;
  
  // Name: letters and spaces only, min 3 chars
  const nameRegex = /^[A-Za-z\s]{3,}$/;
  
  // Email: standard format validation
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  
  // Phone: XXX-XXX-XXXX format
  const phoneRegex = /^\d{3}-\d{3}-\d{4}$/;
  
  // Password: min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special char
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
  
  // Website: optional, but must be valid if provided
  const websiteRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w.-]*)*\/?$/;
  
  let isValid = true;
  let errorMessage = '';
  
  if (!nameRegex.test(name)) {
    errorMessage += 'Name must contain only letters and spaces (min 3 characters).\n';
    isValid = false;
  }
  
  if (!emailRegex.test(email)) {
    errorMessage += 'Please enter a valid email address.\n';
    isValid = false;
  }
  
  if (!phoneRegex.test(phone)) {
    errorMessage += 'Phone must be in XXX-XXX-XXXX format.\n';
    isValid = false;
  }
  
  if (!passwordRegex.test(password)) {
    errorMessage += 'Password must be at least 8 characters and include uppercase, lowercase, number, and special character.\n';
    isValid = false;
  }
  
  if (website && !websiteRegex.test(website)) {
    errorMessage += 'Please enter a valid website URL.\n';
    isValid = false;
  }
  
  if (isValid) {
    alert('Registration successful!');
    this.reset();
  } else {
    alert('Please fix the following errors:\n\n' + errorMessage);
  }
});