纯JavaScript获取多行textarea中当前行起始光标索引

嘿，你这个问题提得很到位——循环遍历每个字符确实在大文本场景下会拖慢性能，毕竟每一次substr和match都是额外开销。其实我们可以利用JS字符串内置的lastIndexOf方法来大幅优化这个逻辑，这可是引擎原生优化过的操作，效率比手写循环高多了！

核心思路 #

我们不需要逐个检查每个字符，只需要：

• 截取selectionStart之前的子字符串
• 在这个子串里找到最后一个换行符的位置（兼容\n、\r、\r\n三种格式）
• 当前行的起始索引就是这个位置 + 1；如果没有找到换行符，说明是第一行，起始索引为0

这个方法的优势在于lastIndexOf是JavaScript引擎底层优化的字符串查找方法，用了更高效的算法（比如Boyer-Moore），比手写循环的性能提升非常明显，尤其是在文本量巨大的时候。

优化后的完整代码 #

<textarea id="ta" rows="5" cols="50">
Line one
Line two
Line three
Line four
</textarea>
<hr>
<div id="output"></div>

<script>
var input = document.getElementById("ta");
var output = document.getElementById("output");
const pattern = /\r?\n|\r/;

input.addEventListener("keydown", function(e) { taHandler(this); })
input.addEventListener("click", function(e) { taHandler(this); })

function taHandler(elem) {
    const lineNum = getLineNumForSelection(elem);
    const caretPos = elem.selectionStart;
    // 使用优化后的方法获取行起始索引
    const lineStartIndx = getLineStartIndex(elem);
    
    output.innerHTML = `Selection Start: ${caretPos} Selection End: ${elem.selectionEnd} <br> 
                        Line Number: ${lineNum.start}<br>
                        Line Start Position: ${lineStartIndx}`;
}

function getLineNumForSelection(sel) {
    return {
        'start' : sel.value.substr(0, sel.selectionStart).split(pattern).length,
        'end' : sel.value.substr(0,sel.selectionEnd).split(pattern).length
    };
}

// 优化后的行起始索引获取函数
function getLineStartIndex(elem) {
    const caretPos = elem.selectionStart;
    const valueUpToCaret = elem.value.substring(0, caretPos);
    
    // 分别找到最后一个\n和\r的位置
    const lastNewline = valueUpToCaret.lastIndexOf('\n');
    const lastCarriageReturn = valueUpToCaret.lastIndexOf('\r');
    
    // 取最大的那个，兼容\r\n的情况
    const lastLineBreak = Math.max(lastNewline, lastCarriageReturn);
    
    return lastLineBreak === -1 ? 0 : lastLineBreak + 1;
}
</script>

额外说明 #

• 这个方法完全符合你的需求：纯JavaScript实现，无第三方库，基于selectionStart获取当前行起始位置，即使选中多行也能正确返回起始行的索引
• 不管文本有多少行，lastIndexOf的实际执行速度远快于手写循环，大文本场景下优势尤为明显

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