HTML5可编辑区数据获取技巧

若目标是模拟 <textarea> 的纯文本提交逻辑（比如表单校验、后端存 plain text），需手动标准化换行和空白：

function getPlainText(el) {
  const html = el.innerHTML;
  // 替换 <br> 为换行符，<p> 块前后加换行，移除其他标签
  return html
    .replace(/<br[^>]*>/gi, '\n')
    .replace(/<p[^>]*>/gi, '\n')
    .replace(/<\/p>/gi, '\n')
    .replace(/<[^>]+>/g, '') // 移除剩余所有标签
    .replace(/\n\s*\n/g, '\n\n')   // 合并连续空行
    .trim();
}

注意：getPlainText 不处理  、零宽空格、Unicode 换行符（如 \u2028），生产环境建议配合 normalize('NFC') 和正则清理。

监听编辑变化不能只靠 input 事件

contenteditable 元素上 input 事件兼容性差（Safari 旧版、IE 完全不触发），且无法捕获剪贴板粘贴、拖放、格式刷等操作引发的内容变更：

• 必须同时监听 input、paste、drop、keydown（针对 Delete/Backspace）
• 更稳妥的做法是使用 MutationObserver 监听子节点或 innerHTML 变化（但开销略高）
• 避免在 paste 事件中直接读 innerHTML —— 此时粘贴尚未完成，应 setTimeout(..., 0) 延迟读取

空内容判断比想象中麻烦

用户删光所有文字后，innerHTML 可能是 "
"、"

function isEmptyEditable(el) {
  const html = el.innerHTML.trim();
  if (!html) return true;
  // 移除所有标签后只剩空格、 、零宽字符等
  const text = html
    .replace(/<[^>]+>/g, '')
    .replace(/&nbsp;| /gi, ' ')
    .replace(/[\u2000-\u200F\u2028\u2029\u202F\u2060\ufeff]/g, '');
  return !text.trim();
}

这个函数仍不能覆盖所有 CMS 或编辑器注入的隐藏占位符，真实项目中建议在初始化时记录“空态基准 HTML”，后续比对更可靠。

今天关于《HTML5可编辑区数据获取技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！