В javascript, как выделить одну строку текста в textarea

Question

Я пытаюсь выделить одну строку текста в <textarea>, аналогично тому, как мы выбираем текст курсором. Но вместо мыши я хочу, чтобы это произошло автоматически. Я установил строку текста, разделенную '\ n'. Я хочу выделить его желтым цветом. Я хотел бы нарисовать соответствующую строку текста, нажав на кнопку. Надеюсь, я смогу выбрать строку текста, а не фиксированный диапазон символов. Большое спасибо.

Вот мой код:

$(document).ready(function(){ 
 
    var text = 'line 1\nline 2\nline 3\n'; 
 
    $('#text').val(text); 
 
});

#container { 
 
    float: left; 
 
} 
 
button { 
 
    width: 50px;height: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
<button id="line1">line 1</button><br><button id="line2">line 2</button><br><button id="line3">line 3</button> 
 
</div> 
 
<textarea id="text" rows="6"></textarea>

Answer 1

Просто попробуйте это:

$(document).ready(function() { 
 
    var text = 'line 1\nline 2\nline 3\n'; 
 
    $('#text').val(text); 
 
    $(".lines").click(function() { 
 
    var num = $(this).attr('id').replace(/[^\d.]/g, ''); 
 
    var tarea = document.getElementById('text'); 
 
    selectTextareaLine(tarea, num); // selects line 3 
 
    }); 
 
}); 
 

 

 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <button class="lines" id="line1">line 1</button> 
 
    <br> 
 
    <button class="lines" id="line2">line 2</button> 
 
    <br> 
 
    <button class="lines" id="line3">line 3</button> 
 
</div> 
 
<textarea id="text" rows="6"></textarea>

Answer 2

Вот демо, который выделяет одну строку в то время, , Вы должны изменить функцию кнопки click, чтобы, например, совместить номер строки с идентификатором кнопки.

В этом примере используется focus, selectionStart, selectionEnd для имитации выделения текста в text area element. Это автоматически выделит выделенный текст.

$(document).ready(function() { 
 
    var text = 'line 1\nline 2\nline 3\n'; 
 
    $('#text').val(text); 
 
    $('button').click(function() { 
 
    // look for id name in text area 
 
    var idName = $(this).prop('id'); 
 
    // look for piece of text matching button id 
 
    var i = text.indexOf(String(idName)); 
 
    console.log(i); 
 
    // select textarea text 
 
    var myTxt = document.getElementsByTagName('textarea')[0]; 
 
    myTxt.focus(); 
 
    myTxt.selectionStart = i; 
 
    myTxt.selectionEnd = i + idName.length; 
 
    }); 
 
});

#container { 
 
    float: left; 
 
} 
 
button { 
 
    width: 50px; 
 
    height: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <button id="line 1">line 1</button> 
 
    <br> 
 
    <button id="line 2">line 2</button> 
 
    <br> 
 
    <button id="line 3">line 3</button> 
 
</div> 
 
<textarea id="text" rows="6"></textarea>