从索引值中突出显示特定文本

Question

我尝试在网站上实现文本到语音搜索。
我尝试这样做的是要强调文本所说的内容。
这是我的代码

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

在控制台日志中， returns是第一个单词的索引值。它告诉所有p标签文本都在textcontent变量中。

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

所以我真正想要的是突出显示它使用索引值所说的文本。
注意： event.name返回 word。

预先感谢。

Answer 1

尝试以这种方式

var event = {
  name: 'highlightText',
  charIndex: 18
};
var text = 'lorem ipsum dolar highlightText sit amet';
var html = text.substring(0, event.charIndex)
            + '<span class="highlight">' + event.name + '</span>'
            + text.substring(event.charIndex + event.name.length, text.length);
            
document.body.innerHTML = html;

.highlight {
  background: yellow;
}

Answer 2

我解决了

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)