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

Question

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

好吧，我正在使用 jquery 和 php 编写一个打字速度脚本。该脚本可以很好地计算 wpm nwpm 等，但问题是当用户键入时没有指示器表明用户输入的是哪个单词（不是 char，WORD，每个由 space 分隔）。

让我说得更清楚。

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

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

和一个要输入的文本区域。我想要的只是突出显示用户正在输入的单词。不是炭。就像在上面的段落中，当用户开始输入第一个单词 "Some" 时，必须突出显示相同的单词位置，如果用户按下 space 来写第二个值，则应该为该单词提供确切的样式。

因此，无论何时用户点击 space，突出显示样式都应应用于该词。如果用户点击 Som，那么突出显示的词应该是 "text"，这是在那个时候输入的。 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 中某些单词的背景颜色

Change background color of some words in div as user writes something in textbox

javascript

jquery

highlight