用單詞突出顯示一個文字（jquery）（關閉）

Question

我想創建高亮顯示來讀取文本的效果。例如，我想強調這樣的文字：

<div> 
    <p>Lorem Ipsum <i>is simply dummy</i> text of the printing and typesetting industry</p> 
    <p>Lorem Ipsum is simply dummy text of <u><b>the printing and</b></u> typesetting industry</p> 
    <p>Lorem Ipsum is <b>simply dummy</b> text of the printing and typesetting industry</p> 
</div> 

因爲我發現這個功能的時刻，但它不保留標籤：

var text = $('div').text(); 
var regex = text.split(' '); 
$('div').html(''); 
for (i = 0, len = regex.length; i < len; i++) { 
    $('div').append('<span>' + regex[i] + ' </span>'); 
} 
$('#click').click(function() { 
j = 0; 
var t = setInterval(
    function() { 
     $('span').eq(j).addClass('highlight'); 
     j++; 
    }, 500 
); 
}); 

我認爲這是可能的，例如正則表達式：/(<[^>]+>)?([^<]*)/g

要捕獲標籤並將它們放在一個表中以讀取此表後，但我不知道如何做到這一點。目前我的結果可以在這裏看到：jsfiddle

我的while循環不會停止。所以停止腳本。謝謝！

---

我找到了我想要的東西：jsfiddle

var pattern = /(<[^>]+>)?([^<]*)?/g 
var text = $('div').html(); 
array = new Array(); 
while ((result = pattern.exec(text)) && (result[0].length) > 0) { 
    array.push(result[1]); 
    if (typeof result[2] !== 'undefined' && result[2].trim().length > 0) { 
     var textSplit = result[2].split(' '); 
     for (i = 0, len = textSplit.length; i < len; i++) { 
      if (textSplit[i].length > 0) { 
       array.push('<span>' + textSplit[i] + '</span>') 
      } 
     } 
    } 
    var i = 0; 
}; 
var x = document.getElementById("demo"); 
x.innerHTML = array.join(" "); 
$('#click').click(function() { 
    j = 0; 
    var t = setInterval(
    function() { 
     $('span').removeClass('highlight'); 
     $('span').eq(j).addClass('highlight'); 
     j++; 
     if (j >= $('span').length) { 
      clearInterval(t); 
     } 
    }, 500); 
}); 

感謝你的幫助尼爾森

Answer 1

取消間隔，當它到達跨度的總數，這樣的：

var t = setInterval(
    function() { 
     $('span').eq(j).addClass('highlight'); 
     j++; 
     if (j >= $('span').length) { 
      clearInterval(t); 
     } 
    }, 500 
); 

請參閱working fiddle