正则匹配会出错，因html是流式解析且含自动补全、注释嵌套、bom、换行等复杂结构；应使用domparser或jsdom等真实解析器，并校验compatmode与meta charset位置。
为什么直接用正则匹配
浏览器解析 HTML 头部不是从完整字符串开始的，而是边接收字节流边做词法分析。你用正则去匹配 .*?，会漏掉未闭合标签、自闭合标签干扰、注释嵌套、BOM 字节、换行符位置差异等问题。更关键的是：真实 HTML 中 可能根本没写——解析器会自动补全，但你的正则找不到。
常见错误现象：parseTitle() 返回空、meta charset 拿不到、viewport 值被截断一半。
- 服务器返回的 HTML 可能没有显式
标签，只有一堆<meta>和<title></title>直接跟在后面 -
<title></title>可能跨行，或中间有 JS 注释（<!-- -->），正则.*?无法安全跳过 - UTF-8 BOM（
\xEF\xBB\xBF）出现在文件开头时，会导致<title></title>内容前多出不可见字符，字符串截取直接错位
用 DOMParser 解析比手写状态机更可靠
DOMParser 是浏览器原生支持的轻量级解析器，它复用了真实渲染引擎的 tokenization 逻辑，能正确处理容错修复（如自动闭合 <p></p>、忽略非法嵌套），且不执行脚本、不加载外部资源，适合纯解析场景。
使用场景：服务端 Node.js（需搭配 jsdom）、前端离线解析本地 HTML 文件、爬虫预处理。
- Node.js 中用
jsdom.JSDOM替代 DOMParser，因原生 DOMParser 在 Node 环境不可用 - 必须指定
contentType: "text/html"，否则可能按 XML 模式解析，导致<meta>被忽略 -
document.querySelector("title")?.textContent比遍历 childNodes 更稳，能自动处理文本节点合并
const dom = new JSDOM(htmlString, { contentType: "text/html" });
const doc = dom.window.document;
const title = doc.querySelector("title")?.textContent?.trim();
const charset = doc.querySelector("meta[charset]")?.getAttribute("charset");
const viewport = doc.querySelector("meta[name=viewport]")?.getAttribute("content");
<meta charset> 必须在前 1024 字节内才有效
这是 HTML5 规范硬性要求：如果 <meta charset="UTF-8"> 出现在文档前 1024 字节之外，浏览器将忽略它，继续按默认编码（如 ISO-8859-1）解码，后续中文会乱码——你解析出来的 title 就是乱码字符串，再怎么 trim 都没用。
性能影响：乱码触发重新解析（reparse），DOM 构建延迟增加 50–200ms，尤其对首屏关键路径敏感。
- 检查方式：用
Buffer.from(htmlString).slice(0, 1024)提取前 1024 字节，确认<meta charset> 是否在里面 - 生成 HTML 时，把
<meta charset="UTF-8">放在第一行，前面不要有任何空格、注释或 BOM - Webpack 插件（如
html-webpack-plugin）开启minify.removeComments: false可能意外插入注释，需关闭
解析结果要校验 document.compatMode
如果 HTML 缺少 或开头有 BOM/注释，<code>document.compatMode 会是 "BackCompat"，说明整个文档走怪异模式。这时你拿到的 title 虽然字符串正确，但后续基于该 HTML 做样式推导、尺寸计算、SEO 分析都会漂移——比如 getComputedStyle(document.body) 返回的 width 值在怪异模式下不等于标准模式。
容易被忽略的地方：这个值在 DOM 构建初期就锁定，JS 无法修改；你解析出的头部信息本身没问题，但它的语义环境已经错了。
- 务必在解析后立即检查
dom.window.document.compatMode === "CSS1Compat" - 若为
"BackCompat"，应拒绝该文档用于 SEO 或自动化布局分析，除非明确接受兼容性降级 - 某些 CMS 导出的 HTML 会静默注入
<script></script>到前，导致 compatMode 错误，需前置过滤
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
