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


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -