javascript - highlight a text word by word (jquery) (closed) -
i want create effect of highlighting read text. example want highlight text:
<div> <p>lorem ipsum <i>is dummy</i> text of printing , typesetting industry</p> <p>lorem ipsum dummy text of <u><b>the printing and</b></u> typesetting industry</p> <p>lorem ipsum <b>simply dummy</b> text of printing , typesetting industry</p> </div>
for moment found function not preserve tags:
var text = $('div').text(); var regex = text.split(' '); $('div').html(''); (i = 0, len = regex.length; < len; i++) { $('div').append('<span>' + regex[i] + ' </span>'); } $('#click').click(function() { j = 0; var t = setinterval( function() { $('span').eq(j).addclass('highlight'); j++; }, 500 ); });
i think possible regular expression example: /(<[^>]+>)?([^<]*)/g
to capture tags , put them in table read table after not know how this. moment result can seen here: jsfiddle
my while loop won't stop. stop script. thanks!
i found wanted : 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(' '); (i = 0, len = textsplit.length; < len; i++) { if (textsplit[i].length > 0) { array.push('<span>' + textsplit[i] + '</span>') } } } var = 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); });
thank nelson
cancel interval when reaches total number of span , this:
var t = setinterval( function() { $('span').eq(j).addclass('highlight'); j++; if (j >= $('span').length ) { clearinterval(t); } }, 500 );
see working fiddle