textcontent 是提取 html 编辑器纯文本最安全方式，但仅适用于 dom 节点；对 html 字符串需先用 domparser 解析为文档再取 textcontent，避免正则误处理嵌套标签或实体。
textContent 是提取 HTML 编辑器内容纯文本最直接、最安全的方式，但它不能直接处理字符串——必须作用于 DOM 节点。如果你拿到的是富文本字符串（比如 contenteditable 元素的 innerHTML），得先解析成节点再取值。
为什么不能对 HTML 字符串直接调用 textContent
textContent 是 DOM 接口属性，只存在于 Node 实例上。对原始字符串（如 "<p>Hello <b>world</b></p>"）直接调用会报错：TypeError: Cannot read property 'textContent' of undefined。常见错误是误写成 htmlString.textContent。
- 字符串不是节点，没有
textContent属性 - 浏览器不会自动把字符串当 HTML 解析——它只是普通字符串
- 必须借助
DOMParser或临时元素创建真实 DOM 结构
从 contenteditable 元素中安全提取纯文本摘要
假设你的 HTML 编辑器是一个 div[contenteditable="true"]，ID 为 editor：
const editor = document.getElementById('editor');
const rawText = editor.textContent; // ✅ 直接读取，天然递归、保留换行、不执行脚本
const summary = rawText.substring(0, 200).replace(/\s+$/g, '') + (rawText.length > 200 ? '…' : '');
- 不用
innerText：它在 Firefox 中跳过display: none子元素，摘要可能缺内容 - 不用
innerHTML.replace(/]*>/g, '')：正则无法处理嵌套标签、自闭合标签或实体（如&会变成&） - 若需脱敏（如隐藏邮箱/手机号），应在取
textContent后单独处理，而不是改 DOM 结构
从 HTML 字符串生成纯文本摘要（未插入 DOM 时）
后端返回或 localStorage 里存的是 HTML 字符串？必须用 DOMParser 解析后再取值：
function htmlToSummary(html, maxLength = 200) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const text = doc.body?.textContent || '';
return text.substring(0, maxLength).replace(/\s+$/g, '') + (text.length > maxLength ? '…' : '');
}
// 示例调用
const summary = htmlToSummary('<p>用户邮箱：test@example.com</p><script>alert(1)</script>', 50);
// → "用户邮箱：test@example.com…"
-
DOMParser能正确处理实体（→ <code>）、注释、<code>script标签内容（不执行） - 务必检查
doc.body是否存在，空字符串或无效 HTML 可能导致doc.body为null - 不要用
document.createElement('div').innerHTML = html方式——若 HTML 含<script></script>，可能被意外执行（尤其在旧版 IE 或某些 CSP 配置下）
容易被忽略的脱敏细节
摘要本身是纯文本，但“脱敏”不是 textContent 的职责——它只负责提取，不识别敏感模式。你得在拿到文本后额外清洗：
- 邮箱、手机号、身份证号等需用正则替换，例如：
text.replace(/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g, '[email]') -
textContent会包含script和style标签内的文字（如<script>console.log("xss")</script>→ 提取出console.log("xss")），若不允许暴露这些内容，需提前移除对应节点 - 如果编辑器允许粘贴 Word 内容，
textContent会带大量不可见 Unicode 空格（如\u200b），建议摘要前加.replace(/[\u200b-\u200f\u202a-\u202f]/g, '')
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
