如何编写正则表达式验证Donorbox EmbedForm？

Hey Samantha, let's get that Donorbox embed verification sorted out! The goal is to make sure the input has both the required script and iframe tags, and their src attributes point to valid Donorbox domains. Here's a step-by-step solution:

Key Validation Requirements #

We need to check for two critical elements:

• A <script> tag with src exactly matching https://donorbox.org/widget.js (allowing for whitespace and extra attributes like paypalExpress)
• An <iframe> tag with src starting with https://donorbox.org/embed/ (allowing for trailing path segments and other attributes like frameborder)

Regex Implementation #

Here's a robust regex pattern that handles whitespace, attribute order variations, and case insensitivity (though Donorbox embeds are usually lowercase, it's safe to account for edge cases):

const donorboxEmbedRegex = /<script[^>]+src=["']https:\/\/donorbox\.org\/widget\.js["'][^>]*>.*?<\/script>\s*<iframe[^>]+src=["']https:\/\/donorbox\.org\/embed\/[^"']+["'][^>]*>.*?<\/iframe>/is;

Breakdown of the Regex #

• <script[^>]+src=["']https:\/\/donorbox\.org\/widget\.js["'][^>]*>: Matches the script tag, ensuring its src points to the Donorbox widget JS. [^>]+ skips any extra attributes, ["'] accounts for single or double quotes around the URL, and \. escapes the dot in the domain.
• .*?<\/script>: Matches the closing script tag (non-greedy to avoid over-matching).
• \s*: Allows for any whitespace (including newlines) between the script and iframe tags.
• <iframe[^>]+src=["']https:\/\/donorbox\.org\/embed\/[^"']+["'][^>]*>: Matches the iframe tag, ensuring its src starts with the Donorbox embed path. [^"']+ allows for any valid path after /embed/.
• .*?<\/iframe>: Matches the closing iframe tag.
• /is flags: i makes the regex case-insensitive, s allows the dot (.) to match newlines (since embeds might be split across lines).

Updated Verification Function #

Here's how to integrate this regex into your TypeScript function:

donorBoxEmbedFormVerification(embedHtml: string): boolean {
  if (!embedHtml) return false;

  const donorboxEmbedRegex = /<script[^>]+src=["']https:\/\/donorbox\.org\/widget\.js["'][^>]*>.*?<\/script>\s*<iframe[^>]+src=["']https:\/\/donorbox\.org\/embed\/[^"']+["'][^>]*>.*?<\/iframe>/is;
  
  // Test if the input matches the pattern
  return donorboxEmbedRegex.test(embedHtml);
}

Notes & Edge Cases #

• Whitespace Handling: The regex accounts for extra spaces, tabs, and newlines between tags and attributes, which is common in copied embed code.
• Attribute Order: It doesn't care about the order of attributes (e.g., paypalExpress can come before or after src in the script tag).
• Quotes: Works with both single (') and double (") quotes around the src values.
• Limitation: Regex isn't perfect for HTML parsing (for example, it won't handle nested tags or malformed HTML). If you need ultra-strict validation, consider using the browser's DOMParser to parse the HTML and inspect elements directly. Here's a quick alternative:

donorBoxEmbedFormVerification(embedHtml: string): boolean {
  if (!embedHtml) return false;

  const parser = new DOMParser();
  const doc = parser.parseFromString(embedHtml, 'text/html');
  
  // Check script tag
  const script = doc.querySelector('script[src="https://donorbox.org/widget.js"]');
  if (!script) return false;
  
  // Check iframe tag with src starting with embed path
  const iframe = doc.querySelector('iframe[src^="https://donorbox.org/embed/"]');
  return !!iframe;
}

This DOM-based approach is more reliable for validating HTML structure, but the regex works great for most common embed code scenarios.

内容的提问来源于stack exchange，提问作者Samantha Létourneau