Reading Word by hihlighting

by Pratik Bhoir

HTML

<button onclick="readWords();">Start Reading</button> <button>Stop Reading</button>  <div id="readPara">Sounds good, eh? So good that the ASP.NET team decided to incorporate the provider model for authentication (membership), roles, user profile, session and other aspects of the runtime into the ASP.NET 2.0 release in 2005. To capitalize on the provider model several new controls were added such as the CreateUserWizard, Login, ResetPassword and ChangePassword controls. These controls, given the provider model, could implement these features without knowing the details of the database being used.</div>

CSS

.highLight {
    font-weight:bold;
    background-color:lightblue;
}

JavaScript

function readWords() {
    console.log("Reading Started......")
    var line = $('#readPara').text();
    var startIndex = 0;
    var endIndex = line.length;
    var a = setInterval(function () {
        //console.log(line.substring(startIndex));
        //console.log(line.substring(startIndex).split(/\W+/));
        var word = line.substring(startIndex).split(/\W+/)[0];
        console.log(word);
        highlightWord(startIndex,startIndex + word.length);
        startIndex = startIndex + word.length + 1;
        if (startIndex >= endIndex) {
            clearInterval(a);
            console.log("Reading Completed......")
        }
    }, 700);
}
//readWords();

function highlightWord(start, end) {
    var readingPara = $('#readPara');
    //readingPara.text().replace("<span class='highLight'>");
    //readingPara.text().replace("</span>");
    var line = readingPara.text();
    if (end > line.length) {
        end = line.length;
    }
    var newLine = line.substring(0, start) + "<span class='highLight'>" + line.substring(start, end) + "</span>" + line.substring(end, line.length);
    readingPara.html(newLine);
}