如何在 JavaScript 中創建將考慮 html 標簽規則的打字機效果？

Question

假設我有一些來自 div 標簽的文本，如下所示：

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

現在，如果我願意，我可以創建一個 JavaScript 函數，該函數將一次打印一個字符，並且可以正常工作。 下面舉例。

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

同樣，上面的函數工作得很好，但是假設我想考慮元素中的 html 標簽，這將如何工作。 一個例子是

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

所以理想的效果是

這是一些很酷的內容

內容段落

（打字機效果的靈感來自查理）“我喜歡在信用到期的地方給予信用”（： Javascript 打字效果

我想我可以加入一個 jsFiddle 來讓人們更輕松。 http://jsfiddle.net/bJxe3/19/

Answer 1

您可以使用字符串的子字符串更新內容，而不是一次添加一個字符，直到索引。 如果索引處的字符是小於號 (<)，只需向前跳到下一個大於號 (>)。

片段：

 const printSentence = (id, sentence, speed = 50) => { let index = 0; let element = document.getElementById(id); let timer = setInterval(function() { const char = sentence[index]; if (char === '<') { index = sentence.indexOf('>', index); // skip to greater-than } element.innerHTML = sentence.slice(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>