Question

如果这个问题已被问过数百万次，我很抱歉，但我真的很努力为我的问题找到解决方案。

我正在使用jquery和php处理打字速度脚本。该脚本适用于计算wpm nwpm等，但问题是当用户输入时没有指示用户在哪个单词（不是char，WORD，每个用空格分隔）。

让我说清楚。

我有一个包含给定段落的div

<div id="paragraph">Some text to type. It will going to be a long set of words</div>

和textarea输入。我想要的只是突出显示用户输入的单词。不是char。如上段所述，当用户开始键入第一个单词“Some”时，必须突出显示相同的单词位置，如果用户按下空格以写入第二个值，则应该为该单词指定确切的样式。

因此，只要用户点击空间，就应该将突出显示样式应用于该单词。如果用户点击Som，则突出显示的单词应该是在该时间输入的“文本”。 document.getElementById（'paragraph'）。length没有解决方案。

由于抱歉我的英语不好，有些令人困惑......

Answer 1

希望这会有所帮助。它使用简单的字符串拆分行为来突出显示应键入的当前单词。如果你必须支持双倍间距，你可以改为正则表达式，但这应该是微不足道的。

工作jsfiddle demo。

<强> HTML

<div id="paragraph">Some text to type. It will going to be a long set of words</div>
<textarea id="typingarea" cols="50"></textarea>

<强>的Javascript

var paragraphArray = $("#paragraph").text().split(' ');
updateTypewriter();

$("#typingarea").on("keyup", function(){
   updateTypewriter();
});

function updateTypewriter(){
   var typingAreaArray = $("#typingarea").val().split(' ');
   var newTypewriterHtml = "";
   var typingAreaWordIndex = 0;
   paragraphArray.forEach(function(word) {
      if (newTypewriterHtml != ""){
         newTypewriterHtml += " ";
      }
      if (typingAreaWordIndex+1 == typingAreaArray.length){
         newTypewriterHtml += "<span style='background-color: red; font-weight: bold;'>" + word + "</span>";
      } else {
         newTypewriterHtml += word;
      }
      typingAreaWordIndex++;
   });
   $("#paragraph").html(newTypewriterHtml);
}

当用户在文本框中写入内容时，更改div中某些单词的背景颜色

1 个答案: