Using jQuery instead of JavaScript how to highlight single line of text in textarea

Question

I am trying to highlight single line of text in <textarea>, similar the way we select the text by cursor. But instead of mouse I want this happen automatically. I setted the line of text is separated by '\n'. I want to highlight it in yellow. I wanted to highline the corresponding line of text by click on the button. I hope I can select the line of text, not the fixed range of character. Thank you very much.

Here is my 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>

I think you should use `div` with `contentEditable="true"` instead of textarea. — ketan, May 11 '16 at 07:23
hey this might be help full http://stackoverflow.com/questions/142527/highlight-text-inside-of-a-textarea — Dhaval Chaudhary, May 11 '16 at 07:24
take a look here:http://stackoverflow.com/questions/13650534/how-to-select-line-of-text-in-textarea — muetzerich, May 11 '16 at 07:25

score 3 · Accepted Answer · edited May 11 '16 at 09:15

Just try this:

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

score 1 · Answer 2 · answered May 11 '16 at 08:26

Here's a demo that highlights one line at a time. You should change the button's click function to for instance match the line number with the button's id.

This example uses focus, selectionStart, selectionEnd to simulate a text selection in the text area element. This will automatically highlight the selected text.

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

Using jQuery instead of JavaScript how to highlight single line of text in textarea

2 Answers2