如何使用JavaScript正则表达式检测并移除HTML无效属性？

Alright, let's tackle this problem head-on—since you can't load the HTML into the DOM, we'll use a regex approach that targets valid attribute patterns and strips out anything that doesn't fit the allowed formats, all while leaving the rest of your HTML structure intact.

Core Approach #

The plan is straightforward:

1. Match every opening HTML tag (including self-closing ones)
2. Extract the attribute section from each tag
3. Filter out only valid attributes that fit one of these standard formats:
   • Pure boolean attributes (e.g., disabled, checked)
   • Attribute with double-quoted value: attr="value"
   • Attribute with single-quoted value: attr='value'
   • Attribute with unquoted value (no spaces/special chars): attr=value

Implementation (JavaScript Example) #

Here's a reusable function that handles the cleanup with regex and a callback to process each tag individually:

function cleanInvalidHtmlAttributes(html) {
  // Match opening tags, capture tag name and attribute content
  return html.replace(/<([a-z][a-z0-9]*)([^>]*)>/gi, (match, tagName, attrs) => {
    // Regex to match ONLY valid attributes (handles escaped quotes too)
    const validAttrPattern = /\s+[a-z_][a-z0-9_-]*(?:=(?:"[^"\\]*(?:\\.[^"\\]*)*"|'[^'\\]*(?:\\.[^'\\]*)*'|[^\s>]+))?/gi;
    
    // Extract all valid attributes from the attribute string
    const validAttrs = attrs.match(validAttrPattern) || [];
    
    // Reconstruct the clean tag with only valid attributes
    return `<${tagName}${validAttrs.join('')}>`;
  });
}

Regex Breakdown #

Let's break down the key valid attribute pattern (validAttrPattern) to understand how it works:

• \s+: Matches one or more whitespace characters before the attribute (handles spacing between attributes)
• [a-z_][a-z0-9_-]*: Valid attribute name (must start with a letter or underscore, followed by letters, numbers, underscores, or hyphens)
• (?:=(?:"[^"\\]*(?:\\.[^"\\]*)*"|'[^'\\]*(?:\\.[^'\\]*)*'|[^\s>]+))?: Optional value section:
  • =: The assignment operator
  • "[^"\\]*(?:\\.[^"\\]*)*": Matches double-quoted values, including escaped quotes (e.g., attr="foo\"bar")
  • '[^'\\]*(?:\\.[^'\\]*)*': Matches single-quoted values with escaped quotes
  • [^\s>]+: Matches unquoted values (no spaces or closing > characters)
  • ?: Makes the entire value section optional (for boolean attributes like disabled)

Test Case #

Input HTML: #

<input id="abc" type="text" value="test" disabled invalid=attr" broken= data-foo=bar>
<div class='test' wrong=val val2 another=></div>
<img src="img.jpg" alt='broken"attr' bad=attr>>

Cleaned Output: #

<input id="abc" type="text" value="test" disabled data-foo=bar>
<div class='test'></div>
<img src="img.jpg" alt='broken"attr'>

Important Notes #

• Escaped Quotes: The regex handles escaped quotes in attribute values, which is a common edge case you might encounter.
• HTML Comments: This solution won't process tags inside HTML comments. If your HTML includes comments, you may want to pre-process to exclude them, or adjust the main tag regex to skip comment blocks.
• Limitations: Since this is string-based (not DOM parsing), it won't handle extremely edge cases like attribute values containing unescaped > characters. For most real-world HTML, though, this should work reliably.
• Self-Closing Tags: The function works with self-closing tags (like <img/> or <input/>) without any modifications.

内容的提问来源于stack exchange，提问作者Gogol