Kullanıcı tarafından girilen metni vurgula - HTML, CSS

Question

Metin paragrafım ve giriş kutunuz var. Kullanıcı, giriş kutusunda paragrafta gösterildiği gibi aynı metni yazacaktır.

Kullanıcı, ilerlemeyi gösterecek şekilde yazarken, paragraf metnini vurgulamak istiyorum. HTML ve CSS'de nasıl yapacağımı bilmiyorum.

Şu anki düşüncem, metindeki her sözcük için bir çeşit etiket (büyük olasılıkla) olmalıdır. Ardından, metin girilen kullanımlar gibi bir renk sınıfı eklemeye devam edin. Bunu yapmanın daha iyi bir yolu olup olmadığını bilmek isterim.

örnek yazarak siteleri http://www.typingtest.com/

Answer 1

Bu JavaScript/jQuery daha iyi kullanılmasını bazı olurdu. İşte

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>

İşlevin dışında bir değişkene paragrafın değerini saklamak istediğiniz bir örnektir uygulama

olduğunu.

Daha sonra keyup işlevini dinlemek ve kullanıcı tarafından girilen girişi almak istiyorsunuz. Orijinal dizede oluşup bulunmadığını bulun ve sonra özgün dizenin html'sini değiştirin.

Tam eşleşme varsa, girişte yazılanları vurgulamak için bir sınıf ekleyeceğiz. Ardından dizenin geri kalanını stil olmadan ekleyeceğiz.