在浏览器环境中，解析 HTML 文档通常不需要额外引入库（原生 API 已足够强大），但以下工具和库可以简化操作或提供更高级的功能：
1. 原生 DOM API（无需库）
浏览器内置的 DOMParser 和 document.createElement 可以直接解析 HTML：
// 方法1：使用 DOMParser
const parser = new DOMParser();
const htmlString = '<div><a href="https://example.com">Link</a></div>';
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc.querySelector('a').href); // 标准化后的URL
// 方法2：动态插入临时元素
const tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;
console.log(tempDiv.querySelector('a').getAttribute('href')); // 原始值
2. 轻量级库（适合复杂操作）
(1) jQuery
- 用途：快速选择、操作 DOM。
- 示例：
const $html = $('<div><a href="../test">Link</a></div>'); console.log($html.find('a').attr('href')); // "../test"（原始值）
(2) cheerio-like: JSDOM
- 用途：在浏览器中模拟 Node.js 的 DOM 环境（如 Cheerio）。
- 安装：
npm install jsdom - 示例：
const { JSDOM } = require('jsdom'); // Webpack等环境下可用 const dom = new JSDOM('<div><a href="/path">Link</a></div>'); console.log(dom.window.document.querySelector('a').href); // "http://localhost/path"（标准化）
(3) Parse5（纯浏览器版）
- 用途：高性能 HTML5 解析器（类似 Node.js 的
parse5）。 - 安装：
通过 CDN：
<script src="https://unpkg.com/parse5/dist/parse5.min.js"></script> - 示例： 需手动遍历 AST，适合需要精确控制的场景。
3. WASM/高性能解析库
(1) HtmlParser2 (via WASM)
- 用途：极速解析超大 HTML。
- 示例： 需结合 WebAssembly，适用于特殊场景。
4. XML/HTML专用工具
(1) xmldom
- 用途：支持 XML/HTML，兼容 W3C DOM。
- 安装：
通过 CDN：
<script src="https://unpkg.com/xmldom@0.6.0/lib/xmldom.js"></script>
如何选择？
| 需求场景 | 推荐工具 |
|---|---|
| 简单DOM操作 | 原生 DOMParser / innerHTML |
| 类jQuery语法 | jQuery |
| Node.js风格DOM操作 | JSDOM |
| 超高性能或特殊需求 | Parse5/HtmlParser2 |
注意事项
- XSS安全风险
直接解析用户输入的 HTML时，务必清理内容（如使用 DOMPurify）。 - Cheerio无法直接在浏览器运行
需用类似功能的替代品（如 JSDOM）。
内容由零声教学AI助手提供，问题来源于学员提问
