最可靠方案是用 innerText 或 textContent 提取纯文本，再用 Array.from(str).length 计算真实字符数；innerText 返回渲染后可见文本，textContent 返回原始 DOM 文本，二者均剥离标签且兼容性好。
直接用 innerText 或 textContent 提取文本，再用 Array.from(str).length 算真实字符数 —— 这是目前最可靠、兼容性好、前后端一致的组合。
为什么不能直接用 innerHTML + .length
因为 innerHTML 返回的是带标签的字符串，.length 统计的是 UTF-16 码元数，不是用户感知的“字数”。比如一个 emoji（如 ?）在 .length 中算 2，但用户只看到 1 个符号；更糟的是，如果 HTML 里有 、 这类实体，它们会被原样计入长度，但实际渲染时并不显示为可见字符。
常见错误现象：
- 输入 “你好 ?” 显示“6 字”，实际应为 4 字（2 汉字 + 1 空格 + 1 emoji）
- 提取出的文本含大量换行、缩进或不可见 Unicode 字符（如
\u200b），导致长度虚高 - 后端用 Python 的
len(text)校验，前端却按innerHTML.length截断，结果提交失败
innerText 和 textContent 怎么选
二者都剥离 HTML 标签，但行为差异关键：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
innerText：受 CSS 样式影响，会忽略display: none、visibility: hidden元素内容，且自动合并空白符（包括换行、制表符），返回的是“渲染后可见文本” -
textContent：纯 DOM 结构提取，无视样式，保留所有文本节点原始空白和注释内容，速度略快，兼容性更好（IE9+） - 如果你要统计用户实际看到的字数（如评论框实时计数），优先用
innerText；如果是做数据清洗、入库前校验，用textContent更可控
示例：
const el = document.querySelector('#article');
const rawText = el.textContent; // 包含所有文本节点，含空格/换行
const visibleText = el.innerText; // 浏览器排版后的真实可见文本
const charCount = Array.from(visibleText).length;
提取后怎么准确算中文/emoji 字符长度
JavaScript 的 str.length 在遇到代理对（surrogate pair）时失效，必须绕过 UTF-16 码元计数逻辑：
- ✅ 推荐：
Array.from(str).length—— ES2015+ 原生支持，语义清晰，对中文、日文、韩文、emoji、组合字符（如é）全部准确 - ⚠️ 兼容 IE9/10？改用正则：
str.match(/[\s\S]/gu)?.length || 0（u标志开启 Unicode 模式） - ❌ 避免：
str.split('').length—— 在代理对上仍会出错；encodeURI(str).length完全不相关 - 注意性能：对超长文本（>50KB）频繁调用
Array.from会有轻微开销，但普通页面内容完全无感
从远程 HTML 字符串中提取并计数的完整链路
当你拿到的是 HTML 字符串（比如 fetch 返回的 response.text()），不能直接用 innerText，得先解析成 DOM：
- 创建临时容器：
const div = document.createElement('div') - 注入 HTML：
div.innerHTML = htmlString（浏览器自动修复不闭合标签） - 提取文本：
const text = div.innerText或div.textContent - 去噪（可选）：
text.replace(/\s+/g, ' ').trim()合并多余空白 - 算长度：
Array.from(text).length
容易被忽略的一点：如果 HTML 字符串本身含 script 标签或内联事件（如 onclick），innerHTML 赋值会执行脚本。生产环境务必确保来源可信，或先用正则剥离 script 标签再解析。
