如何在textarea中选择文本行答案

【问题标题】：How to select line of text in textarea如何在textarea中选择文本行
【发布时间】：2012-11-30 17:55:26
【问题描述】：

我有一个文本区域，用于保存大量 SQL 脚本以进行解析。当用户单击“Parse”按钮时，他们会得到 SQL 脚本的摘要信息。

我希望摘要信息是可点击的，这样当点击它时，SQL 脚本的行会在 textarea 中突出显示。

我已经在输出中有行号，所以我只需要 javascript 或 jquery 告诉它要突出显示文本区域的哪一行。

是否有某种类型的“goToLine”功能？在我所有的搜索中，没有什么能完全解决我正在寻找的东西。

【问题讨论】：

顺便说一句，所有内容都包含在一个页面上。没有“提交”或任何东西。

标签： javascript jquery textarea

【解决方案1】：

这个函数需要第一个参数引用你的文本区域，第二个参数是行号

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/

【讨论】：

这真是太棒了。非常感谢！
如果由于某种原因您发现自己需要取消选择任何选择：window.getSelection().removeAllRanges()
我不知道为什么，但是 jsfiddle 没有选择行文本，它不起作用。
@AmrElgarhy，它对我也不起作用，我删除了 mootools 并开始起作用。如果您无法删除 mootools，则将其替换为 jquery。
@HimanshuTanwar 是的，我添加了 jquery 而不是 mootools，它起作用了，谢谢。

【解决方案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; 
    }

【讨论】：

您的 startPos 还选择了上一行中的 \n 字符，为其添加 +1 修复了工作 (textarea.value.substring(0, textarea.selectionStart).lastIndexOf("\n") >= 0) ? textarea.value.substring(0, textarea.selectionStart).lastIndexOf("\n") + 1 : 0;
你好...抱歉恢复这个线程。作为 JS 的完全新手，我将其调整为在 HTA 中使用 textarea 元素的 onclick 事件。但是，如果没有 if 条件和 return 语句，它似乎工作得很好，在什么情况下需要它们？

【解决方案3】：

搜索行的一个更简洁的版本：

    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

【讨论】：

【解决方案4】：

为了让函数对可能的错误输入更加宽容，请在后面添加：

// array starts at 0
lineNum--;

这段代码：

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

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

【讨论】：

【解决方案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; 
}

【讨论】：