JavaScriptで、テキストエリアのテキストの1行をハイライト表示する方法

Question

<textarea>の1行のテキストを強調表示しようとしていますが、これはカーソルでテキストを選択する方法と似ています。しかしマウスの代わりに私はこれが自動的に起こりたい。私はテキストの行を '\ 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機能を変更して、たとえばボタンのIDと行番号を一致させる必要があります。

この例では、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>