Automatically select text

Question

I’m trying to create a function that traverses any text by selecting letter as the effect of you hovering your mouse by selecting text slowly.

I used the select() but it selects all the text.

Example:

function SelectText(element) {
  var doc = document;
  var text = doc.getElementById(element);
  if (doc.body.createTextRange) {
    var range = doc.body.createTextRange();
    range.moveToElementText(text);
    range.select();
  } else if (window.getSelection) {
    var selection = window.getSelection();
    var range = doc.createRange();
    range.selectNodeContents(text);
    selection.removeAllRanges();
    selection.addRange(range);

  }
}
$('p').click(function() {
  SelectText("selectme");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<p id="selectme">Silvio Santos Ipsum É fácil ou não éam? Mah é a porta da esperançaam. Ma vai pra lá. É por sua conta e riscoamm? Patríciaaammmm... Luiz Ricardouaaammmmmm. O arriscam tuduam, valendo um milhão de reaisuam. Ma! Ao adquirir o carnê do Baú, você estará concorrendo
  a um prêmio de cem mil reaisam. Eu não queria perguntar isso publicamente, ma vou perguntar. Carla, você tem o ensino fundamentauam? Ma quem quer dinheiroam? Estamos em ritmo de festamm. Eu só acreditoammmm.... Vendoammmm. Ma vejam só, vejam só. É com
  você Lombardiam.</p>

I believe that the effect of selecting text cannot be triggered automatically ( just calling a function without triggering an event). I needed a click event to trigger it.

How can I make this effect?

Answer 1

For this answer I will consider only the browsers that follow the default, so it will not work in IE (maybe adapting the method used in the first if of the code in the question).

In order to select a part of the text you need to assign the selection in the element Text instead of Htmlelement, using Range.setEnd(), which receives a position as a parameter.

To make the animation I used setInterval.

var selecionar = document.body.children[0];
var textNode = selecionar.childNodes[0]; // elemento Text
var selection = window.getSelection();
var range = document.createRange();
range.setStart(textNode, 0); // define início da seleção
var interval = setInterval(function() {
  range.setEnd(textNode, range.endOffset + 1); // expande seleção
  selection.removeAllRanges();
  selection.addRange(range);
  if (textNode.length === range.endOffset) {
    // terminou animação, termine a execução
    clearInterval(interval);
  }
}, 50);

<p>Cursus curae odio vestibulum nec ullamcorper in at quisque ac etiam vestibulum scelerisque euismod quis vitae a a nibh curae. A consectetur aliquet cras ac scelerisque tristique scelerisque.</p>

Note: selection appears with gray background due to <iframe> the site is not actively focused, but executing this code on a page works as expected.

Answer 2

The solution of Sanction undoubtedly seems better, but as I was already making one too, follows below the code, in this is possible to take any <p> from the page for example, but it has some disadvantages like using the Sleep function, which shows an Alert all the time, just check the checkbox to not display more that works (run on a web page outside of here because the Alert does not run in stackoverflow)

<p id="selectme">Silvio Santos Ipsum É fácil ou não éam? Mah é a porta da esperançaam. Ma vai pra lá. É por sua conta e riscoamm? Patríciaaammmm... Luiz Ricardouaaammmmmm. O arriscam tuduam, valendo um milhão de reaisuam. Ma! Ao adquirir o carnê do Baú, você estará concorrendo
  a um prêmio de cem mil reaisam. Eu não queria perguntar isso publicamente, ma vou perguntar. Carla, você tem o ensino fundamentauam? Ma quem quer dinheiroam? Estamos em ritmo de festamm. Eu só acreditoammmm.... Vendoammmm. Ma vejam só, vejam só. É com
  você Lombardiam.</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>

</script>

<script>
var text = $('#selectme').text();
var array = [];
for(var i in text) { array.push(text.charAt(i)) }
$('#selectme').html('')
;

for (var i in array) { $('#selectme').append("<span>"+array[i]+"</span>") }

function SelectText(element) {
  var p = $('#selectme');
  p.children().each(function(index, child) {
       var selection = window.getSelection();
       var range = document.createRange();
       range.setEnd(child, range.endOffset + 1); // expande seleção
       selection.removeAllRanges();
       selection.addRange(range);
       sleep(50);
  });
}

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
    alert("");
}

$('p').click(function() {
  SelectText("selectme");
});
</script>

the ideal would be to merge the two to get a more complete solution to the problem