一个字一个字地突出显示文本(jquery)(关闭)
highlight a text word by word (jquery) (closed)
我想创建一个高亮显示阅读文本的效果。例如,我想突出显示以下文本:
<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);
});
谢谢你的帮助Nelson
当达到总跨度数时取消间隔,如下所示:
var t = setInterval(
function() {
$('span').eq(j).addClass('highlight');
j++;
if (j >= $('span').length ) {
clearInterval(t);
}
}, 500
);
参见working fiddle
相关文章:
- 我已经创建了一个jquery转盘,并使用if条件来运行和停止转盘
- 按照选项卡索引的顺序循环一个jQuery选择
- 在创建对象后附加一个jquery事件
- 我需要一个jQuery函数来只工作在700px以上的屏幕大小,无法在我的代码中发现错误
- 一个jquery验证器方法,它不接受纯数字或纯特殊字符,但接受上面是否有字母
- 我做了一个jquery幻灯片,但没有;我工作不好,我该怎么办
- 我创建了一个jQuery幻灯片,但它一直在重复相同的图像
- 是preventDefault()一个jQuery函数或javascript函数
- 使用一个 jquery 代码关闭多个模态
- 如何在 elfinder(一个 jquery 文件管理器插件)中只显示文件夹列表
- 遍历下一个和上一个 jQuery 选项卡
- module.exports一个jQuery插件
- 有没有一个jquery marquee插件/脚本可以处理不同宽度的图像
- 一个jquery初始化中有多个类
- 如何从其中的另一个jquery脚本运行.load()
- 从 javascript 数组创建一个 Jquery 数组
- 第一个jquery事件正在发生,但没有发生第二个事件
- 向一个jQuery/DOM元素添加一个函数
- 我们如何在jQuery Datatable调用结果中启动另一个jQuery插件,而不是页面就绪函数
- 我可以自动生成一个jquery块,对不同的元素做同样的事情吗