如何在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

您可以使用字符串的子字符串直到索引更新内容,而不是一次添加字符.如果索引处的字符小于号(<),则只需跳到下一个大于号(>).

片段:

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>