如何在textarea中選擇文本行

Question

我有一個用於保存大量 SQL 腳本以進行解析的 textarea。 當用戶單擊“解析”按鈕時，他們將獲得有關 SQL 腳本的摘要信息。

我希望摘要信息是可點擊的，這樣當點擊它時，SQL 腳本的行會在 textarea 中突出顯示。

我已經在輸出中有行號，所以我只需要 javascript 或 jquery 告訴它要突出顯示 textarea 的哪一行。

是否有某種類型的“ goToLine ”功能？ 在我所有的搜索中，沒有什么能完全解決我正在尋找的問題。

Answer 1

此函數要求第一個參數引用您的 textarea，第二個參數為行號

function selectTextareaLine(tarea,lineNum) {
    lineNum--; // array starts at 0
    var lines = tarea.value.split("\n");

    // calculate start/end
    var startPos = 0, endPos = tarea.value.length;
    for(var x = 0; x < lines.length; x++) {
        if(x == lineNum) {
            break;
        }
        startPos += (lines[x].length+1);

    }

    var endPos = lines[lineNum].length+startPos;

    // do selection
    // Chrome / Firefox

    if(typeof(tarea.selectionStart) != "undefined") {
        tarea.focus();
        tarea.selectionStart = startPos;
        tarea.selectionEnd = endPos;
        return true;
    }

    // IE
    if (document.selection && document.selection.createRange) {
        tarea.focus();
        tarea.select();
        var range = document.selection.createRange();
        range.collapse(true);
        range.moveEnd("character", endPos);
        range.moveStart("character", startPos);
        range.select();
        return true;
    }

    return false;
}

用法：

 var tarea = document.getElementById('myTextarea');
 selectTextareaLine(tarea,3); // selects line 3

工作示例：

http://jsfiddle.net/5enfp/

Answer 2

darkheir 帖子中的代碼無法正常工作。 基於它，我縮短了代碼並使其工作。

    function onClickSelection(textarea){
        if(typeof textarea.selectionStart=='undefined'){
            return false;
        }
        var startPos=(textarea.value.substring(0,textarea.selectionStart).lastIndexOf("\n")>=0)?textarea.value.substring(0,textarea.selectionStart).lastIndexOf("\n"):0;
        var endPos=(textarea.value.substring(textarea.selectionEnd,textarea.value.length).indexOf("\n")>=0)?textarea.selectionEnd+textarea.value.substring(textarea.selectionEnd,textarea.value.length).indexOf("\n"):textarea.value.length;
        textarea.selectionStart=startPos;
        textarea.selectionEnd=endPos;
        return true; 
    }

Answer 3

為了使該功能對可能的錯誤輸入更加寬容，請添加以下內容：

// array starts at 0
lineNum--;

這段代碼：

if (typeof(tarea) !== 'object' || typeof(tarea.value) !== 'string') {
  return false;
}

if (lineNum === 'undefined' || lineNum == null || lineNum < 0) {
  lineNum = 0;
}

Answer 4

搜索行的更簡潔版本：

    function select_textarea_line (ta, line_index) {

        const newlines = [-1];   // Index of imaginary \n before first line
        for (let i = 0; i < ta.value.length; ++i) {
            if (ta.value[i] == '\n') newlines.push( i );
        }

        ta.focus();
        ta.selectionStart = newlines[line_index] + 1;
        ta.selectionEnd   = newlines[line_index + 1];

    } // select_textarea_line

Answer 5

如何在 textarea javascript 中選擇文本行雙擊特定行。

//This function expects first parameter to be reference to your textarea. 
function ondblClickSelection(textarea){
    var startPos = 0;
    var lineNumber = 0;
    var content = "";
    if(typeof textarea.selectionStart == 'undefined') {
        return false;
    }
    startPos = textarea.selectionStart;
    endPos = textarea.value.length;
    lineNumber = textarea.value.substr(0,startPos).split("\n").length - 1;
    content = textarea.value.split("\n")[lineNumber];
    var lines = textarea.value.split("\n");
    var endPos = lines[lineNumber].length+startPos;
    textarea.selectionStart = startPos;
    textarea.selectionEnd = endPos;
    return true; 
}