ユーザーが入力したハイライトテキスト - HTML、CSS

Question

私はテキスト段落と入力ボックスを持っています。ユーザーは段落に示すように同じテキストを入力ボックスに入力します。

私は段落テキストをハイライト表示し、ユーザーが進行状況を表示するようにしたいと思います。私はHTMLとCSSでどうやったらいいのか分かりません。

私の現在の考えは、テキスト内のすべての単語に対して何らかの種類のタグ（おそらくスパン）を持つことです。そして、テキストが入力されると、カラークラスを追加し続けます。私はこれを行うより良い方法があるかどうかを知りたいと思います。

の例では、タイピングサイトhttp://www.typingtest.com/

Answer 1

の一部これではJavaScript/jQueryので良く使用されているだろう。ここでは一例として実装

var originalText = $("#user-text").text(); 
 

 
$("textarea").on("keyup", function() { 
 
    var enteredText = $("textarea").val(); 
 
    var length = enteredText.length; 
 
    if (originalText.search(enteredText) == 0) { 
 
    \t $("#user-text").html("<span class='highlight'>" + originalText.slice(0, length) + "</span>" + originalText.slice(length, originalText.length)); 
 
    } 
 
});

.highlight { 
 
    background: gold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<textarea></textarea> 
 

 
<p id="user-text">This is a paragraph</p>

あなたは、関数の変数外での段落の値を格納したいです。

次に、keyup関数をリッスンし、ユーザーが入力した値を取得します。それが元の文字列にあるかどうかを調べ、元の文字列のhtmlを変更します。

正確に一致するものがあれば、入力された入力をハイライト表示するためのクラスを挿入します。その後、スタイリングなしで残りの文字列を追加します。