How should i highlight a text in textarea when press start button using javascript?

Question

I am a beginner to JavaScript.

Can Some one help me?

How can i highlight the texts of Textarea with background, when press the star button. and Cursor should stop with highlighted background when click Stop.

And When press the stop button, it would show the words count, lines count.

for example:

The time between the two button pressed will give us the time it took for the user to read. And because the text area has the number of words, can calculate the "Reading Speed" For example: 120 words per minute, that is like 2 words a second. 1200 words in 10 minutes.

This is how I calculated that. Lets say a book page typically has: 30 lines * 8 words per line that is 240 words a page time 600 pages that is 144,000 words all together divide that by 120 words a minute reading speed that is 1200 minutes divide by 60 minutes an hour: 20 hours

The below link has related to my Question. But the text has highlighted the text into another textarea. I want to be highlight the text in same textbox.

How to highlight text in TextArea

This is my html code:

<div id="startbtn">
<button id="start" onclick="startHighlight()">Start!</button>
</div>
<div id="stoptbtn">
<button id="stop" onclick="stopHighlight()">Stop!</button>
</div>        
<div id="container">
<textarea id="inputText"></textarea>
</div>

Answer 1

Latest Update : Reading Simulator now reads every word based on Users inputSpeed AND based on the length of the word to provide a more realistic reading flow. https://jsfiddle.net/8Lwm6gh1/40/

Sourcode for the js:

Updated Code

  $('#sim').each(function(){
    this.contentEditable = true;
});

var go = $('#go');
var stop = $('#stop');
var wordCount = 0;
var wordCountBox = $('#wordCountBox');
var timepassed = $('#timepassed');
var textRead = $('#textRead');
var small = $('small');


go.on("click", function(e){
    e.preventDefault();
    startSim();
});

function startSim(){
    var speed = $('#speed').val();
    timeStart = $.now();
    var sim = $('#sim').text();
    var wordArray = sim.split(" ");
    var simWrap = $('#sim');
    var loopCount = 0;

    var arrCount = wordArray.length;
    var alreadyRead = [];
    loopDat();
    var i = loopCount;    
    function loopDat(){
            var pos = loopCount;
            var realSpeed = wordArray[pos].length;
            realSpeed = (realSpeed * (speed / 5));
            // realSpeed = Math.round((realSpeed * 0.1) * speed);
            console.log('Reading speed of current word: '+realSpeed);
            if(loopCount == pos){
                setTimeout(function() { 
                    if(pos < 0){
                        pos = 0;
                    }
                    alreadyRead.push(wordArray[pos]);
                    wordArray[pos] = '<b>'+wordArray[pos]+'</b>';
                    small.text('Current reading speed: '+realSpeed);
                    var words = wordArray.join(" ");
                    simWrap.html(words);                
                    wordCount++;
                    if(pos == (arrCount - 1)){
                        triggerDone();
                    }
                    loopCount++;
                    if(loopCount < arrCount){
                        loopDat();
                    }
                }, realSpeed);
            }
    }
    // Function done
    function triggerDone(){
        wordCountBox.text('Words counted: '+wordCount);
        var timeEnd = $.now();
        var timeRes = timeEnd - timeStart;
        timeRes = parseInt(timeRes);
        timeRes = timeRes / 1000;
        timepassed.text(timeRes+" seconds have passed");
        alreadyRead = alreadyRead.join(" ");
        textRead.text(alreadyRead);
        var summary = $('#summary');
        summary.show();
        return;
    } 
    stop.on("click", function(e){
        e.preventDefault();
        triggerDone();
    });
}