Q:

Highlight the text in textarea with delay

I am trying to highlight the single line of text in <textarea> with time delay. And I am wondering if I can choose a different color? The thing I wanted is when I click on the first <button>, the first line is highlighted into blue, click on the second <button>, 1 second later, the second line is highlighted into blue, lastly click on the third <button>, 2 second later, the third line is highlighted into yellow. I noticed I have a bug that I clicked on the button 3 times then the highlight doesn't work, but it is okay for me, I just want to know how to make the time delay and highlight with a different color. Thank you very much.

$( document ).ready(function() {
  var str = 'line 1\nline 2\nline 3\n';
  var textNumChar = str.length;
  $('#str').val(str);
  
  startPosition = 0;
  $(".lines").click(function() {
    var tarea = document.getElementById('str');
    for(i=startPosition;i<textNumChar;i++)
    {
        if(str[i]=='\n') {
            endposition = i;
            break;
        }
    }
    tarea.selectionStart = startPosition;
    tarea.selectionEnd = endposition;
    startPosition = endposition+1;
  });
});
#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 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="str" rows="6"></textarea>

A:

You can use setTimeout() to set the delay in highlighting the text based on button id.
And ::selection css selector to style the portion of an element that is selected.

$( document ).ready(function() {
  var str = 'line 1\nline 2\nline 3\n';
  var textNumChar = str.length;
  $('#str').val(str);
  
  startPosition = 0;
  $(".lines").click(function(e) {
    var tarea = document.getElementById('str');
    for(i=startPosition;i<textNumChar;i++)
    {
        if(str[i]=='\n') {
            endposition = i;
            break;
        }
    }
    
    var time = 0;
    var tar_id = e.target.id;
    var colors;
    if(tar_id == 'line1' ) {  colors = 'red'; }
    else if(tar_id == 'line2' ) { time = 1000; colors = 'blue'; }
    else if(tar_id == 'line3' ) { time = 2000; colors = 'green'; }
    
    setTimeout(function(){
      tarea.selectionStart = startPosition;
      tarea.selectionEnd = endposition;
      startPosition = endposition+1;
      $('body').addClass(colors);
    }, time);
  });
});
#container {
    float: left;
}
button {
    width: 50px;height: 30px;
}

.red ::selection {
    color: red;
    background: yellow;
}
.blue ::selection {
    color: blue;
    background: red;
}
.green ::selection {
    color: green;
    background: blue;
}
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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="str" rows="6"></textarea>

