读取HTML文件内容技巧分享

本文深入解析了在不同环境下安全、高效读取和解析HTML文件的核心技巧：针对浏览器中fetch加载本地HTML触发CORS错误的问题，明确指出file://协议被浏览器安全策略禁止，并给出部署本地HTTP服务或改用XMLHttpRequest的实用解决方案；强调DOMParser解析HTML字符串比innerHTML更安全可靠，避免脚本执行与DOM污染；在Node.js环境中则重点提醒fs读取时的编码与路径陷阱，并对比cheerio与jsdom在服务端批量处理HTML时的性能、兼容性与容错优势，同时点出编码识别这一常被忽视却至关重要的环节——真正帮你避开从读取到解析全流程中的典型坑。

用 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() 结果），想提取其中的