html如何用正则表达式

在HTML处理中,正则表达式（Regex）常用于文本匹配、提取或替换特定模式的内容，但需注意：正则表达式不适合解析完整的HTML结构（嵌套标签等复杂场景应使用DOM解析器），以下是常见场景及示例：

适用场景与示例

1. 提取标签内容
   匹配所有<a>标签的链接：

   <as+[^>]*href="([^"]*)"[^>]*>

   const html = '<a href="https://example.com">Link</a>';
   const matches = html.match(/<as+[^>]*href="([^"]*)"[^>]*>/);
   console.log(matches[1]); // 输出: https://example.com

2. 移除HTML标签
   保留纯文本（不处理嵌套标签）：

   

   <[^>]+>

   import re
   clean_text = re.sub(r'<[^>]+>', '', '<div>Hello <b>World</b></div>')
   print(clean_text)  # 输出: Hello World

3. 匹配特定属性
   查找img标签的src：

   <imgs+[^>]*src="([^"]*)"[^>]*>

   preg_match_all('/<imgs+[^>]*src="([^"]*)"[^>]*>/i', $html, $matches);
   print_r($matches[1]); // 输出所有图片URL

4. 简单表单验证
   前端邮箱校验（基础版）：

   <input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$">

关键注意事项

1. 避免解析复杂HTML
   HTML非正则友好语言，标签嵌套（如<div><div></div></div>）会导致匹配失败。
   正确工具：

   // 使用DOM解析器
   const parser = new DOMParser();
   const doc = parser.parseFromString(html, 'text/html');
   doc.querySelectorAll('a').forEach(link => console.log(link.href));

2. 防范安全风险
   处理用户输入的HTML时：

   • 禁用等贪婪匹配（可能绕过校验）。
   • 优先用DOMPurify等库过滤XSS。

3. 性能优化
   避免回溯灾难：用具体字符类（如[^>]*）替代。

何时用正则？何时用解析器？

引用说明：

• W3C规范强调HTML需通过树结构解析（非正则）。
• OWASP建议使用DOMPurify防御XSS攻击。
• 正则示例基于MDN Web Docs及Python re文档最佳实践。