in JavaScript, wie einzelne Textzeilen in Textbereich

Question

ich einzelne Textzeilen in <textarea>, ähnlich wie wir wählen Sie den Text mit dem Cursor zu markieren versuch zu markieren. Aber statt Maus möchte ich das automatisch geschehen lassen. Ich habe die Textzeile durch '\ n' getrennt. Ich möchte es gelb hervorheben. Ich wollte die entsprechende Textzeile durch Klicken auf den Button unterstreichen. Ich hoffe, ich kann die Textzeile auswählen, nicht den festen Zeichenbereich. Vielen Dank.

Hier ist mein Code:

$(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

diese Versuche mal:

$(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

Hier ist eine Demo, die zu einem Zeitpunkt eine Zeile Highlights . Sie sollten die Funktion click der Schaltfläche ändern, um beispielsweise die Zeilennummer mit der ID der Schaltfläche zu vergleichen.

Dieses Beispiel verwendet focus, selectionStart, selectionEnd eine Textauswahl in den text area element zu simulieren. Dadurch wird der ausgewählte Text automatisch hervorgehoben.

$(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>