应监听input事件实时统计字数，中文、英文、数字、标点均计1字，空格和换行符也各计1字；避免用String.length，推荐Array.from(text).length或正则匹配Unicode字符。
怎么用 input 和 textarea 实时统计中文、英文、标点混合字数
直接监听 input 事件比 keyup 更可靠，它覆盖粘贴、拖入、自动填充等所有文本变更场景。中文字符、英文单词、数字、标点都应计入「字数」，但空格和换行符是否计入需明确——多数编辑场景下，空格算 1 字，换行符（
）也按 1 字处理，否则统计结果与用户直觉偏差大。
关键点在于别用 String.length 直接当字数：它返回的是 UTF-16 码元个数，对 emoji（如 "??"）或部分生僻汉字会误判为 2 字。稳妥做法是用 Array.from(text).length 或正则匹配 Unicode 字符（/p{Extended_Pictographic}|p{Emoji_Presentation}|p{L}|p{N}|p{P}|p{Zs}/gu），但日常工具够用的折中方案是：对中文字符（Unicode 范围 u4e00-u9fa5）、英文字母、数字、常见标点（。，！？；：“”‘’（）【】《》、-_.,!?;:"'()[]{}/\|`~@#$%^&*+=）全部单字计数，其余空白符（含制表符 ）统一按 1 字处理。
示例逻辑：
function countChars(text) {
let count = 0;
for (let i = 0; i < text.length; i++) {
const c = text[i];
if (/[u4e00-u9fa5a-zA-Z0-9u3000-u303fuff00-uffef.,!?;:"'()[]{}<>-_s]/.test(c)) {
count++;
} else if (/[u1f300-u1f9ff]/.test(c)) { // 基础 emoji 补充
count++;
}
}
return count;
}
contenteditable 区域怎么避免统计错乱
如果统计目标是富文本容器（比如带格式的 div[contenteditable="true"]），不能直接取 innerText 或 textContent ——前者会把连续空白压缩成单空格，后者会漏掉 br 标签代表的换行，导致字数少算。
立即学习“前端免费学习笔记（深入）”；
正确做法是遍历 DOM 节点提取纯文本，同时把 br、p、div 等块级换行元素转为
，再走前述字数逻辑：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 用
NodeIterator或递归遍历子节点，跳过script、style等非内容节点 - 遇到
br、p、div（且display: block）插入一个 - 对文本节点调用
nodeValue，不经过 HTML 解析（避免把&当作&多算） - 最后合并字符串再统计，否则嵌套结构里重复计算空格或换行
为什么 oninput 绑定后仍漏统计粘贴内容
某些浏览器（尤其是 Safari）在 contenteditable 上对 paste 事件的触发时机有延迟，单纯靠 input 事件可能来不及捕获刚粘贴进来的文本。更稳的方式是双保险：
- 保留
input事件用于常规输入 - 额外监听
paste事件，在setTimeout(..., 0)里触发一次统计（让浏览器先完成粘贴 DOM 更新） - 对
textarea可省略paste监听，因为它的input能完整捕获粘贴
注意：不要在 paste 里直接读取 event.clipboardData.getData('text') 后统计——这会忽略用户粘贴的富文本中的换行和格式符号，实际粘到编辑区的文本可能不同。
统计结果要不要区分「字符数」「字节数」「中文字符数」
必须分清用途。微信公众号限制 20000 字，指的是「字符数」（含空格换行）；而服务器存储或 API 接口常要求「UTF-8 字节数」，例如一个中文字符占 3 字节，emoji 可能占 4 字节。若只显示一个数字，用户无法判断是否超限。
建议默认显示三项：
-
总字符数：按前述逻辑统计，面向用户最直观 -
UTF-8 字节数：用new TextEncoder().encode(text).length（现代浏览器）或手动遍历计算（c.codePointAt(0) > 0x7f ? 2/3/4 字节） -
中文字符数：用text.match(/[u4e00-u9fa5]/g)?.length || 0，方便内容审核或排版预估
别用 escape() 或 encodeURIComponent() 算字节数——它们对中文编码结果不是 UTF-8，且会把空格变成 %20 导致结果膨胀。
复杂点在于 emoji 和组合字符（如带肤色修饰符的 ???），真实字节数和视觉字数不一致，但普通内容工具可暂不深究；真要精准，得用 Intl.Segmenter（目前兼容性有限），或者接受小误差。
