如何在选中多行部分文本时选中对应整行内容？

要实现点击按钮后获取选中区域涉及的所有完整行内容，并合并为单行文本，可按以下方式修改代码：

完整代码示例 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable>lorem ipsum
dolor sit
lorem ipsum

lorem ipsum
dolor sit
lorem ipsum
</div>
<br>
<button>CLICK</button>

CSS #

div {
  white-space: pre-wrap;
  outline: none;
}

JavaScript #

$('button').on('click', function() {
  const sel = window.getSelection();
  // 将选区起始点移至涉及的最上方行开头
  sel.modify('move', 'backward', 'lineboundary');
  // 将选区扩展至涉及的最下方行结尾
  sel.modify('extend', 'forward', 'lineboundary');
  // 合并多行文本为单行
  const fullLineContent = sel.toString().replace(/\s*\n\s*/g, ' ').trim();
  console.log(fullLineContent);
});

原理说明 #

1. 选区范围调整：通过window.getSelection()获取当前选区，利用modify方法将选区扩展为选中区域涉及的所有完整行：
   • move backward lineboundary：把选区起始点定位到选中区域覆盖的最顶部行的开头
   • extend forward lineboundary：把选区结束点扩展到选中区域覆盖的最底部行的结尾
2. 文本合并处理：用toString()提取选中的多行文本，通过正则表达式替换换行符及前后空白为单个空格，再去除首尾多余空白，得到符合需求的单行合并内容。

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