Select text automatically

3

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

I used 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><pid="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 can not be triggered automatically (just by calling a function without triggering an event). I needed a click event to get it triggered.

How can I do this?

    
asked by anonymous 19.11.2015 / 11:48

2 answers

1

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

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

To do 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: The selection appears with a gray background because the <iframe> of the site is not in active focus, but running this code on a page works as expected.

    
19.11.2015 / 13:37
1

The solution to the Sanction without doubts seems better, but as I was already doing one, follow below the code, it is possible to get any% of the page% for example, but there are some disadvantages like the use of the sleep function, which shows an alert all the time, just check the checkbox to not show more that works (run on a web page outside here because the alert does not run on 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>vartext=$('#selectme').text();vararray=[];for(variintext){array.push(text.charAt(i))}$('#selectme').html('');for(variinarray){$('#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>

Ideally, you should merge the two to get a more complete solution to the problem.

    
19.11.2015 / 13:59