应使用 Array.from(el.value).length 累加所有 table textarea 的 value 字符数，因其按 Unicode 字符精确计数，兼容 emoji、生僻字及换行符，且 IE11+ 原生支持；避免用 value.length（UTF-16 码元计数）导致前后端不一致。
如何用 JavaScript 获取表格内所有 textarea 的字符总数
直接遍历 document.querySelectorAll('table textarea')，对每个元素取 value 并用 Array.from(text).length 累加——这是最准、最简、兼容性够用的做法。别用 textContent 或 innerText，它们对 textarea 无效；也别用 value.length，它在 emoji 和生僻字上会多算。
为什么不能只用 value.length 累加
value.length 返回的是 UTF-16 码元个数，不是用户感知的“字符数”。典型问题包括：
-
"??"（家庭 emoji）长度为 4，但用户只看到 1 个符号 - 某些汉字（如 U+20000 以上）占 2 个码元，
.length算作 2 字 - 后端若用
mb_strlen($str, 'UTF-8')或 Python 的len()校验，前后端数值不一致，提交可能被截断或拒绝
用 Array.from(el.value).length 可准确按 Unicode 字符计数，覆盖全部常见中文、emoji、标点、换行符（\n 算 1 字），且无需 polyfill（IE11+ 原生支持）。
怎么处理空值、隐藏或禁用的 textarea
表格里常混有 display: none、disabled 或未渲染完成的 textarea，它们的 value 仍可读取，但是否计入总数得看业务规则：
- 默认应包含所有
textarea元素，无论是否 visible/disabled —— 因为用户可能通过 JS 启用或显示它们 - 若明确排除 disabled 元素：加过滤
el.disabled === false - 若排除不可见元素：用
getComputedStyle(el).display !== 'none'，但注意这无法判断visibility: hidden或父级隐藏 - 避免用
el.offsetParent === null判断可见性，它在表格单元格中易误判
一次统计多个 textarea 的性能与边界注意点
对普通表格（≤50 个 textarea），直接遍历无压力；但若表格动态生成、含大量编辑区（如在线 Excel 类工具），需注意：
- 缓存查询结果：
const textareas = document.querySelectorAll('table textarea')，别在循环里重复调用 - 避免在统计函数中读取
offsetHeight、getBoundingClientRect()等触发强制重排 - 如果表格内容超长（单个
textarea> 10KB），Array.from()开销微增，但实测在现代浏览器中仍低于 1ms - 不要在每次
input事件里全量重算——可对每个textarea单独监听，只更新自身变化部分，再汇总
真正容易被忽略的是：表格里混用 contenteditable 单元格和 textarea 时，不能统一用同一套逻辑处理——前者必须走 DOM 遍历提取纯文本，后者直接读 value 即可。强行合并会导致换行符漏算或 emoji 多算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
