How to select line of text in textarea

问题

I have a textarea that is used to hold massive SQL scripts for parsing. When the user clicks the "Parse" button, they get summary information on the SQL script.

I'd like the summary information to be clickable so that when it's clicked, the line of the SQL script is highlighted in the textarea.

I already have the line number in the output so all I need is the javascript or jquery that tells it which line of the textarea to highlight.

Is there some type of "goToLine" function? In all my searching, nothing quite addresses what I'm looking for.

回答1:

This function expects first parameter to be reference to your textarea and second parameter to be the line number

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;
}

Usage:

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

Working example:

http://jsfiddle.net/5enfp/

回答2:

The code in the post by darkheir does not work correctly. Based on it I shortened the code and made it working.



    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; 
    }

回答3:

To make the function more forgiving on possible faulty input add after:

// array starts at 0
lineNum--;

This code:

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

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

回答4:

How to select line of text in textarea javascript double click on particular line.

//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; 
}

来源：https://stackoverflow.com/questions/13650534/how-to-select-line-of-text-in-textarea

标签

javascript

jquery

textarea