直接双击html文件提取文本会失败，因为file://协议下浏览器禁止javascript读取本地文件；需用python启动http服务（如python -m http.server 8000）并在localhost访问，再用domparser安全解析html获取文本。
为什么直接双击HTML文件提取文本会失败
浏览器在 file:// 协议下禁止 JavaScript 读取本地文件内容，这是硬性安全策略。哪怕你的 HTML 文件和待提取的网页文件（如 article.html）放在同一文件夹，用 fetch('article.html') 也会触发 net::ERR_FILE_NOT_FOUND 或 CORS error。这不是代码写错了，是协议层拦住了——你写的提取逻辑根本没机会执行。
用 Python 起一个最小 HTTP 服务来绕过限制
不需要装 Node.js、不用配环境变量，Python 自带模块就能解决。确保目标 HTML 文件（比如 target.html）和你的提取器 HTML 在同一目录：
- 终端进入该目录，运行：
python -m http.server 8000（Windows 用户可用py -m http.server 8000） - 浏览器访问
http://localhost:8000/extractor.html（假设你的提取器叫这个名字） - 此时
fetch('target.html')就能正常返回文本内容了 - 若提示端口被占，换数字即可，例如
8080
核心提取逻辑：用 DOMParser 解析而非正则
别用 match() 或 replace() 去“扒” HTML 标签——遇到嵌套、属性含引号、注释或 CDATA 就崩。正确做法是让浏览器自己解析：
const htmlText = await (await fetch('target.html')).text();
const doc = new DOMParser().parseFromString(htmlText, 'text/html');
const text = doc.body?.innerText || doc.documentElement?.innerText || '';
注意点：
-
DOMParser不执行脚本、不加载图片，纯解析，安全且稳定 -
innerText会保留换行和空白缩进，如需干净段落可后续text.replace(/\s+/g, ' ').trim() - 如果目标页没有
（比如是片段），回退到documentElement
中文乱码和路径含空格的典型报错
常见现象：fetch 成功但返回乱码，或控制台报 Failed to load resource 且路径里有中文/空格。根本原因不是编码设置错，而是服务器未正确声明 Content-Type 和字符集。
Python 默认服务不设 charset=utf-8，解决方案有两个：
- 给目标 HTML 文件手动加
<meta charset="utf-8">（放在内） - 或改用更可控的工具，比如 VS Code 的
Live Server插件——它默认带charset=utf-8响应头，对中文路径也更宽容 - 绝对避免用带空格或中文的文件名，如
我的文章.html→ 改成article_zh.html
真正卡住人的往往不是提取逻辑本身，而是 HTTP 服务没跑起来、路径没对上、或者以为浏览器能绕过 file:// 限制——这些地方一错，后面所有 JS 都白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
