读取HTML内容技巧全解析

本文深入解析了在不同环境下读取和解析HTML文件的核心技巧与常见陷阱：浏览器中直接用fetch加载本地file://协议HTML会因CORS策略被拦截，必须通过本地HTTP服务或XMLHttpRequest绕过；使用DOMParser解析HTML字符串比innerHTML更安全可靠，能避免脚本执行和DOM污染；Node.js中需用fs模块正确读取文件并注意编码与路径问题，再结合cheerio（轻量高效、适合批量提取）或jsdom（更完整但较重）进行解析；最后强调编码识别（如GBK/Big5）这一极易被忽视却直接影响解析成败的关键环节。

用 fetch 读取本地 HTML 文件会触发 CORS 错误

浏览器直接用 fetch('./page.html') 加载本地 HTML 文件时，如果页面是通过 file:// 协议打开的，绝大多数现代浏览器会拒绝请求，并抛出类似 Blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 的错误。

这不是代码写错了，而是浏览器安全策略限制——file:// 协议不被视作合法的跨域请求源。解决方法只有两个：

• 把页面部署到本地 HTTP 服务上（推荐），比如用 npx serve、python3 -m http.server 或 VS Code 的 Live Server 插件
• 改用 XMLHttpRequest 并设置 responseType = 'document'（仅限同源且非 file:// 场景）

别试图用 readAsText + FileReader 去读取用户选择的 HTML 文件——那只能用于 显式选取的场景，不适用于预设路径加载。

用 DOMParser 解析 HTML 字符串比 innerHTML 更安全可靠

当你拿到一段 HTML 字符串（比如从 fetch 返回的 text() 结果），想提取其中的