CODEWITHSUNDEEP
htmljquerycss
tiger
tiger

Reputation: 131

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

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>

Upvotes: 2

Views: 2142

Answers (2)

Dhara Parmar
Dhara Parmar

Reputation: 8101

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>

Upvotes: 3

user2314737
user2314737

Reputation: 29407

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>

Upvotes: 1

Related Questions