Come creare un effetto typewriter in JavaScript che terrà conto delle regole dei tag html?

Question

Supponiamo che ho avuto qualche testo da un tag div come questo:

<div id="outPutContainer"> 
    <div id="contentDiv" style="display:none;"> This is some cool content... </div> 
</div> 

Ora, se avessi voluto, avrei potuto creare una funzione JavaScript che stamperà i caratteri uno alla volta e funzionerà bene. Esempio di seguito.

function printSentence(inner, outer, index, speed) { 
    var input = document.getElementById(inner).innerHTML; 
    var timer = setInterval(function(){ 
     document.getElementById(outer).innerHTML+=input.charAt(index); 
     index++; 
     if(index == sentence.length -1){ 
      printResume(inner, outer, index+1, speed); 
     }else{ 
      clearInterval(timer); 
     } 
    }, speed); 
} 

printSentence("contentDiv", "outPutContainer", 0, 100); 

Anche in questo caso, la funzione di cui sopra funziona bene, però diciamo che ho voluto prendere in considerazione i tag html all'interno dell'elemento, come vorrei che il lavoro. Un esempio potrebbe essere

<div id="contentDiv2"> This is some cool <strong>content</strong> 
    <p>Paragraph of content</p> 
</div> 

Così l'effetto ideale sarebbe

Questo è un po 'di fresco contenuti

Paragrafo di contenuti

(L'effetto macchina da scrivere è stato ispirato da Charlie) "I come concedere crediti laddove il credito è dovuto "(: Javascript typing effect

Suppongo di poter inserire un jsFiddle per rendere più facile la gente. http://jsfiddle.net/bJxe3/19/

Answer 1

Invece di aggiungere un carattere alla volta, è possibile aggiornare il contenuto con una sottostringa della stringa fino all'indice. Se il carattere dell'indice è un segno di meno che (<), passa semplicemente al successivo segno maggiore di (>).

Snippet:

function printSentence(id, sentence, speed) { 
 
    var index = 0, 
 
     timer = setInterval(function() { 
 
    var char= sentence.charAt(index); 
 
    if(char === '<') index= sentence.indexOf('>',index); 
 
    document.getElementById(id).innerHTML= sentence.substr(0,index); 
 
    if(++index === sentence.length){ 
 
     clearInterval(timer); 
 
    } 
 
    }, speed); 
 
} //printSentence 
 

 
printSentence(
 
    'contentDiv', 
 
    'This is some cool <strong>content</strong>.<p>Paragraph of content</p><ul><li>This<li>is<li>a<li>test</ul><table><tr><th>Header 1<th>Header 2<tr><td>Row 2, Col 1<td>Row 2, Col 2</table>', 
 
    50 
 
);

body, table {font: 12px verdana;} 
 
table {border-spacing: 0;} 
 
td,th {border: 1px solid gray;} 
 
th {background: #def;}

<div id="contentDiv"></div>