textarea空行生成双换行符，求文本编辑器行计数器解决方案

架构老林

2026-8-11

解决contenteditable div同步到textarea时空行生成双换行的问题

首先，你同步文本的代码存在选择器错误：应该获取#visible这个contenteditable div的内容，而非#code-editor（textarea本身），这是导致异常换行的潜在原因之一。

核心问题在于：contenteditable div中的空行（比如回车生成的<br>或空<div>）用innerText获取时，会被解析为连续两个换行符\n\n，同步到textarea后用split("\n")拆分，就会得到连续的空字符串元素。

解决方案

1. 修正同步代码并处理换行符

修改同步逻辑，将连续的多个换行符替换为单个，确保每个空行只对应一个换行：

const visibleDiv = document.querySelector("#visible");
const textarea = document.querySelector("#code-editor");
// 把连续2个及以上的换行替换为单个，保留正常行分隔
textarea.value = visibleDiv.innerText.replace(/\n{2,}/g, '\n');

2. 优化行计数逻辑（可选）

如果需要更精准的行数组，也可以在拆分后过滤无效的连续空字符串（优先推荐同步阶段处理）：

function getLines() {
  const textValue = document.querySelector('#code-editor').value;
  let lines = textValue.split("\n");
  // 过滤连续空字符串，保留单个空行
  lines = lines.reduce((result, currentLine) => {
    if (currentLine === "" && result[result.length - 1] === "") {
      return result;
    }
    result.push(currentLine);
    return result;
  }, []);
  console.log(lines);
}