如何实现点击按钮选中可编辑元素内光标所在的整行内容？

原代码存在的问题 #

当前代码尝试通过扩展选区来选中整行，但有两个明显问题：

• 光标在second或third单词内时，只能选中该行右侧内容，左侧内容无法选中
• 首尾行（first和fourth行）因为开头/结尾没有\n字符，无法正常选中整行

修复后的代码 #

JavaScript 代码

$('button').on('click', function(){
    const selection = window.getSelection();
    if (selection.rangeCount === 0) return;
    
    const range = selection.getRangeAt(0);
    const startContainer = range.startContainer;
    const startOffset = range.startOffset;
    
    // 定位到行首（或内容开头）
    let currentOffset = startOffset;
    while (currentOffset > 0) {
        const char = startContainer.textContent[currentOffset - 1];
        if (char === '\n') break;
        currentOffset--;
    }
    range.setStart(startContainer, currentOffset);
    
    // 定位到行尾（或内容结尾）
    currentOffset = startOffset;
    const textLength = startContainer.textContent.length;
    while (currentOffset < textLength) {
        const char = startContainer.textContent[currentOffset];
        if (char === '\n') break;
        currentOffset++;
    }
    range.setEnd(startContainer, currentOffset);
    
    // 应用选区
    selection.removeAllRanges();
    selection.addRange(range);
});

HTML 代码（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre contenteditable>
This is the first line

This is the second line
This is the third line

This is the fourth line
</pre>
<button>CLICK</button>

修复逻辑说明 #

1. 先获取当前光标对应的Range对象，避免无选区时的异常
2. 向左遍历文本内容，直到碰到换行符\n或内容开头，确定行首位置
3. 向右遍历文本内容，直到碰到换行符\n或内容结尾，确定行尾位置
4. 调整Range的起止位置后，重新设置选区，实现整行选中

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