JSFiddle - React, Tailwind, and code Playground

by marlberm2014

HTML

<div id="awts">
    <div id = "test">This is a sample lesson.<div>This is a p tag inside a p tag</div></div>
    <p id = "lewl">Another sample lesson</p>
    <ol>
        <li>One.</li>
        <li>Two.</li>
    </ol>
    <p>This is a sample lesson. We will try to put another sentence for the sake of a longer speech. <img src = "https://www.google.com.ph/images/srpr/logo11w.png" width="150" />We have put an image before this sentence</p>
</div>
<div>
    <input type="button" value="Simulate Event" id="button1" />
    <input type="button" value="Get Word Start End" id="button2" />
    <input type="button" value="Trigger Node" id="button3" />
</div>

JavaScript

String.prototype.regexLastIndexOf = function(regex, startpos) {
    regex = (regex.global) ? regex : new RegExp(regex.source, "g" + (regex.ignoreCase ? "i" : "") + (regex.multiLine ? "m" : ""));
    if(typeof (startpos) == "undefined") {
        startpos = this.length;
    } else if(startpos < 0) {
        startpos = 0;
    }
    var stringToWorkWith = this.substring(0, startpos + 1);
    var lastIndexOf = -1;
    var nextStop = 0;
    while((result = regex.exec(stringToWorkWith)) != null) {
        lastIndexOf = result.index;
        regex.lastIndex = ++nextStop;
    }
    return lastIndexOf;
}

function selectAll(elem){
   var range = document.createRange();
    range.setStart(elem, 0);
    range.setEnd(elem, 1);
    window.getSelection().addRange(range);
}

function selectParticular(elem, start, end){
    var range = document.createRange();
    range.setStart(elem.firstChild, start);
    range.setEnd(elem.firstChild, end);
    window.getSelection().addRange(range);
}

function clearSelection(){
    if (window.getSelection) {
       if (window.getSelection().empty) {  // Chrome
         window.getSelection().empty();
       } else if (window.getSelection().removeAllRanges) {  // Firefox
         window.getSelection().removeAllRanges();
       }
    } else if (document.selection) {  // IE?
      document.selection.empty();
    }   
}

function simulateEvent(text){
    var g_theMessage = text;
    var g_elem = document.getElementById("lewl");
    var msgArray = g_theMessage.split(" ");
    var index = 0, start = 0, end = 0;
    var intervalVar = setInterval(function(){
        if(index >= msgArray.length){
            clearInterval(intervalVar);
        }
        clearSelection();
        if(msgArray[index] == ""){
            end++;
        }else if(msgArray[index].replace(/^\s+/, '').replace(/\s+$/, '') === '') {
            end = start + msgArray[index].length;
        }else{
            end = start + msgArray[index].length;
           ...