Jak stworzyć efekt maszyny do pisania w JavaScript, który będzie uwzględniał reguły znaczników html?

Question

Załóżmy miałem jakiś tekst ze znacznikiem div tak:

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

Teraz gdybym chciał, mógłbym stworzyć funkcję JavaScript, która będzie drukować znaki jeden na raz i będzie działać dobrze. Przykład poniżej.

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); 

Ponownie, powyższa funkcja działa dobrze, jednak powiedzmy chciałem brać pod tagami konto html wewnątrz elementu, w jaki sposób, że praca. Przykładem może być

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

więc idealny efekt byłby

Jest kilka fajnych zawartości

Ustęp treści

(Efekt maszynistki była inspirowana przez Charlie) „I lubię udzielać kredytu tam, gdzie jest należny kredyt "(: Javascript typing effect

Przypuszczam, że mogę rzucić jsFiddle, aby ułatwić ludziom. http://jsfiddle.net/bJxe3/19/

Answer 1

Zamiast dodawać znaki za jednym razem, można zaktualizować zawartość podciągu łańcucha aż do indeksu. Jeśli znak w indeksie jest znakiem mniejszym niż (<), po prostu przejdź do następnego znaku większego niż (>).

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>