Highlight the particular text from it's index value

Question

I tried to implement text-to-speech search on my website.
What I tried to do this is to just highlight the text that what it speaking.
Here is my code

this.utterThis.onboundary=function(event){
    if(event.name=='word'){
      this.progress_index=event.charIndex;
      console.log(textcontent.charAt(this.progress_index))
    }  

In console log, what it returns is the index value of the first word. It tells that all the p tag text is in textcontent variable.

var textcontent = (<HTMLIFrameElement>document.getElementById("description")).contentWindow.document.body.innerHTML;

So what I actually want is to highlight the text that it spoken using the index value.
Note: event.name returns word.

Thank in advance.

Answer 1

i solved it

this.utterThis.onboundary = function (event) {
    if (event.name == 'word') {
      this.progress_index = event.charIndex;

      this.remainingword = this.utterThis.text.substring(this.progress_index, this.utterThis.text.indexOf(" "));

      var html:string = this.utterThis.text.substring(this.progress_index, this.utterThis.text.indexOf(" ")).fontcolor("blue") + this.utterThis.text.substring(this.remainingword.length + 4);
      console.log(html);
      (<HTMLIFrameElement>document.getElementById("description")).contentWindow.document.body.innerHTML = html;
    }
  }.bind(this)