Question

我有一个textarea，用于存放大量的SQL脚本进行解析。当用户单击“Parse”按钮时，他们将获得有关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

使该功能在可能出现的错误输入后更加宽容

lineNum--; // array starts at 0

此代码

if(typeof(tarea)!=='object' || typeof(tarea.value)!=='string'){return false;}
if(lineNum ==='undefined' || lineNum==null || lineNum<0){lineNum=0;}

Answer 4

如何在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; 
}

如何在textarea中选择文本行

4 个答案: