如何使用JavaScript处理并净化Web表单中的用户输入字符串（含URL或文本类型内容）？

Hey there! Let's tackle this problem head-on—handling and sanitizing user input in web forms while preserving special formats like URLs, plain text, and math formulas is super common, but it needs a careful balance of security and functionality. Here's a practical, step-by-step approach I've used in production projects:

Before worrying about preserving formats, we need to lock down against XSS attacks and malicious input. Once we have that safety net, we can layer in logic to keep valid special content intact.

1. Basic XSS Protection (Non-Negotiable) #

The simplest way to sanitize pure text is to let the browser handle escaping, but that breaks any intentional formatting. Instead, use a whitelist-based approach to only allow safe, approved content:

function basicSanitize(input) {
  // First, escape all HTML tags to neutralize potential XSS
  let sanitized = input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
  
  // Restore safe, allowed tags with proper safeguards
  // Allow <a> tags only for valid HTTP/HTTPS URLs
  sanitized = sanitized.replace(
    /&lt;a href="(https?:\/\/[^"]+)"&gt;([^&]+)&lt;\/a&gt;/g,
    '<a href="$1" rel="noopener noreferrer">$2</a>'
  );
  
  // Allow <code> tags for code snippets or inline formulas
  sanitized = sanitized.replace(
    /&lt;code&gt;([^&]+)&lt;\/code&gt;/g,
    '<code>$1</code>'
  );
  
  return sanitized;
}

This works by first neutralizing all HTML, then selectively restoring only the safe tags we explicitly allow—with extra protections like rel="noopener noreferrer" to prevent tabnabbing from links.

2. Identify & Preserve Special Formats #

Auto-Link Raw URLs #

If users paste plain-text URLs (like https://example.com instead of wrapping them in <a> tags), we can auto-convert them to safe links without breaking other content:

function isValidURL(url) {
  // Validate that the URL is a valid HTTP/HTTPS address
  try {
    const urlObj = new URL(url);
    return ['http:', 'https:'].includes(urlObj.protocol);
  } catch (e) {
    return false;
  }
}

function linkifyRawURLs(input) {
  const urlRegex = /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))/g;
  
  return input.replace(urlRegex, (match) => {
    // Only link valid URLs to avoid malicious junk
    return isValidURL(match) 
      ? `<a href="${match}" rel="noopener noreferrer">${match}</a>` 
      : match;
  });
}

Preserve Math Formulas (e.g., LaTeX) #

If users input LaTeX-style formulas like $E=mc^2$, we need to make sure these aren't escaped or mangled. The trick is to temporarily "hide" formulas during sanitization, then restore them:

function preserveLaTeXFormulas(input) {
  const latexRegex = /(\$[^$]+\$)/g;
  const formulaPlaceholders = [];
  
  // Replace formulas with unique placeholders
  let processed = input.replace(latexRegex, (match) => {
    const placeholder = `__MATH_PLACEHOLDER_${formulaPlaceholders.length}__`;
    formulaPlaceholders.push(match);
    return placeholder;
  });
  
  // Sanitize the rest of the content
  processed = basicSanitize(processed);
  
  // Restore the original formulas
  formulaPlaceholders.forEach((formula, index) => {
    processed = processed.replace(`__MATH_PLACEHOLDER_${index}__`, formula);
  });
  
  return processed;
}

3. Full Input Processing Pipeline #

Combine these steps in the right order to ensure everything works together without conflicts:

function processUserInput(input) {
  // 1. Preserve formulas first so URL regex doesn't accidentally match them
  let processed = preserveLaTeXFormulas(input);
  // 2. Auto-link any raw URLs
  processed = linkifyRawURLs(processed);
  // 3. Final sanitization pass to catch any remaining risks
  processed = basicSanitize(processed);
  
  return processed;
}

4. Pro Tips for Edge Cases #

• Test with weird input: Throw edge cases like "><script>alert('XSS')</script> or $https://malicious.com$ at your functions to make sure they hold up.
• Avoid over-sanitizing: If you need to support more formats (like MathML for complex equations), expand your whitelist instead of restricting everything.
• Render safely: When inserting sanitized content into the DOM, use innerHTML only if you trust the output—otherwise stick to textContent for pure text contexts.

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