textContent 配合字符串方法最直接：先用 document.querySelector 获取元素，调用 .textContent.trim() 去除空白，再用 .startsWith() 判断开头，匹配后用 .slice() 或正则提取；避免使用 innerText 和 innerHTML，坚持 textContent 获取纯文本。
用 textContent 配合字符串方法最直接
HTML 本身不提供“提取指定开头文本”的原生 API，必须先拿到文本内容，再用 JavaScript 处理。最稳妥的方式是读取元素的 textContent（而非 innerHTML），避免标签干扰。比如要提取以 "【提示】" 开头的段落文字：
- 先用
document.querySelector或document.querySelectorAll定位到目标元素（如p、div） - 对每个元素调用
.textContent.trim()去除首尾空白 - 用
.startsWith("【提示】")判断是否匹配开头 - 匹配后可进一步用
.slice()或正则截取所需部分，例如text.slice(4)去掉前 4 个字符
用正则匹配更灵活，但要注意贪婪和换行
如果开头模式含变量或需跳过空格/换行，正则比 startsWith 更合适。例如提取所有以 "Error:" 开头、后面跟非换行内容的文本块：
const regex = /^Error:[^\n\r]*/gm; const matches = htmlString.match(regex) || [];
关键点：
-
^必须配合m（multiline）标志才能在多行中逐行生效 -
[^\n\r]*比.*更安全，避免跨行误吞 - 若从 DOM 元素提取，仍需先用
el.textContent转成字符串，不能对innerHTML直接正则——否则会混入标签
避免踩坑：innerText 不可靠，innerHTML 会引入 HTML
常见错误是用 innerText ——它受 CSS 样式影响（如 display: none 的内容不返回），且在不同浏览器中行为不一致；而 innerHTML 包含标签，导致 "<strong>【提示】</strong>内容" 被识别为以 "<strong>"</strong> 开头。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 坚持用
textContent获取纯文本 - 如果原始 HTML 中有内联样式或 JS 动态插入内容，确保提取时机在 DOM 渲染完成后（如放在
DOMContentLoaded回调里） - 若目标文本跨多个子节点（如
<p><em>【提示】</em>请检查...</p>），textContent仍能拼出完整字符串，无需手动遍历子节点
服务端预处理比前端 JS 提取更稳定
如果 HTML 来源可控（如自己生成的页面或 SSR 输出），在服务端就标记好目标文本，比前端 JS 提取更可靠。例如后端渲染时加特定 class 或 data 属性：
<p class="extractable" data-prefix="【提示】">【提示】请输入邮箱</p>
前端只需：
document.querySelectorAll('p[data-prefix="【提示】"]').forEach(el => console.log(el.textContent));
- 规避了字符串匹配的模糊性（比如文本里恰好出现
"【提示】"但不是开头） - 性能更好，尤其在大量节点时
- 当文本含 Unicode 空格、零宽字符等边界情况时，语义化标记仍能准确命中
真正难的不是写对一行 .startsWith，而是确认“开头”在业务逻辑中是否真有明确、稳定的定义——比如用户复制粘贴进来的 HTML 可能带不可见字符，这时候靠肉眼调试 textContent.charCodeAt(0) 才是实际要做的。
