javascript 如何在textarea中选择文本行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13650534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select line of text in textarea
提问by Flat Cat
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.
我有一个 textarea 用于保存大量 SQL 脚本进行解析。当用户单击“解析”按钮时，他们将获得有关 SQL 脚本的摘要信息。
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.
我希望摘要信息是可点击的，以便在点击时，SQL 脚本的行在文本区域中突出显示。
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.
我已经在输出中有行号，所以我需要的是 javascript 或 jquery 告诉它要突出显示 textarea 的哪一行。
Is there some type of "goToLine" function? In all my searching, nothing quite addresses what I'm looking for.
是否有某种类型的“ goToLine”功能？在我所有的搜索中，没有什么能完全解决我正在寻找的问题。
回答by lostsource
This function expects first parameter to be reference to your textarea and second parameter to be the line number
此函数要求第一个参数引用您的 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;
}
Usage:
用法：
var tarea = document.getElementById('myTextarea');
selectTextareaLine(tarea,3); // selects line 3
Working example:
工作示例：
回答by Sven Huber
The code in the post by darkheir does not work correctly. Based on it I shortened the code and made it working.
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;
}
回答by 2x2p
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;
}
回答by 2x2p
How to select line of text in textarea javascript double click on particular line.
如何在 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;
}
