contenteditable div粘贴文本时出现多余换行符问题求解决方案

问题复现 #

• 待粘贴示例文本：

Hi Sir,
This is for the testing Purpose only.
Username: <>
Password: <>
Best,
DEMO USER

• 当前innerText获取到的实际输出：

Hi Sir,\n\n\n\n\n\nThis is for the testing Purpose only.\nUsername: <>\nPassword: <>\n\n\n\n\nBest,\nDEMO USER

• 期望的innerText输出：

Hi Sir,\nThis is for the testing Purpose only.\nUsername: <>\nPassword: <>\nBest,\nDEMO USER

解决方案 #

方案1：获取内容后做正则替换（最简单，适配所有场景） #

直接在获取innerText后，用正则把连续2个及以上的换行替换为单个换行即可，代码示例：

const rawText = editableDiv.innerText
const cleanedText = rawText.replace(/\n{2,}/g, '\n')

如果需要兼容包含回车\r的场景，可以用：

const cleanedText = rawText.replace(/[\r\n]{2,}/g, '\n')

方案2：监听paste事件，从根源拦截多余换行 #

主动监听contenteditable元素的粘贴事件，直接读取剪贴板纯文本，手动插入到光标位置，阻止默认粘贴行为，避免浏览器自动生成多余块元素导致的多换行：

const editableDiv = document.querySelector('#your-editable-div')
editableDiv.addEventListener('paste', (e) => {
  e.preventDefault()
  // 获取剪贴板纯文本
  const text = e.clipboardData.getData('text/plain')
  // 手动插入内容到光标位置
  document.execCommand('insertText', false, text)
})

如果需要兼容不支持document.execCommand的现代浏览器，可以用Selection API插入内容：

editableDiv.addEventListener('paste', (e) => {
  e.preventDefault()
  const text = e.clipboardData.getData('text/plain')
  const selection = window.getSelection()
  if (!selection.rangeCount) return
  const range = selection.getRangeAt(0)
  range.deleteContents()
  range.insertNode(document.createTextNode(text))
  // 把光标移到插入内容的末尾
  range.collapse(false)
  selection.removeAllRanges()
  selection.addRange(range)
})

方案3：设置CSS规则减少多余换行 #

给contenteditable元素添加CSS规则，避免浏览器自动把换行转成块元素带来的额外换行：

[contenteditable] {
  white-space: pre-line;
}
[contenteditable] br {
  display: block;
  content: "";
}

该方案可以配合前两个方案一起使用，效果更好。

内容的提问来源于stack exchange，提问作者Akash Tewari