0

我想创建一个突出显示的效果来阅读文本。例如，我想突出显示此文本：

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

谢谢你的帮助尼尔森

4

1 回答 1

1

当达到 span 的总数时取消间隔，如下所示：

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

见工作小提琴

于 2013-04-25T09:57:26.197 回答