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

逐字突出显示文本（jquery）（已关闭）

1 个答案: