递归的读高亮功能

Question

我正在尝试将语音意图传递给递归运行的函数，直到用户说 "exit"，它。在该功能退出之前，该功能会按顺序突出显示与用户的语音意图相匹配的每个单词。我的计划是创建一个 'cursor'，它是 div 中的父节点，其结构如下所示：

<div> <span id="word"+ i> </span>... </div>

每个 span 都有一个连续的 id，以便于区分它们。我的主要问题是我不知道如何将光标设置到文档中的下一个跨度。

最初它设置为 window.getSelection() 然后我想 select 当用户输入与当前 cursor.innerHtml[匹配的意图时 div 中的下一个跨度=13=]

目前我在控制台中收到一条错误消息说 'cursor is undefined'。


highlightOnRead=(doc,cursor)=>{
       var transcripts=document.getElementById("transcriptSpan")
        var transcript = transcripts.innerHTML;


              if(transcript !== undefined && transcript!==" "){
              console.log("transcript",transcript)
              console.log("cursor",cursor.anchorNode.parentNode.id) //we only need the word
              console.log("cursor plus 1",cursor.anchorNode.parentNode.nextSibling.id)
              let elem = document.getElementById(cursor.anchorNode.parentNode.id) //the element where the cursor is currently

              if(transcript.includes(" ")){
                transcript = transcript.split(" ").pop()
              }
                if(transcript.toLowerCase() !== elem.innerHTML.toLowerCase() && transcript.toLowerCase() !== 'exit')
                {
                   cursor = cursor.anchorNode.parentNode.nextSibling.id
                  this.props.readAlongHighlight(doc,cursor)
                  console.log(transcript)
                }
                 cursor = cursor.anchorNode.parentNode.nextSibling.id
                  elem.style.backgroundColor = 'yellow'; //highlight the span matching the intent
                  //move the cursor to the next element in the div
              this.props.readAlongHighlight(doc,cursor)
              console.log("leaving the function")
              return
            }
            console.log("leaving the function")
          };

Answer 1

我想通了！

cursor=document.getElementById(cursor.anchorNode.parentNode.id).nextSibling.nextElementSibling;

递归的读高亮功能

Recursive on-read highlighting function

javascript

speech-recognition