击中一个单词然后突出显示

Question

我已经尝试了几个小时来完成这项工作。

我需要一个函数，如果它是正确的，它会突出显示char。

例如，单词是“halluluja”，我有一个输入字段。

当用户点击“h”时，必须在“halleluja”中使“h”变为红色，如果用户之后点击“ha”，则必须突出显示a。等等。

我试过用substr，没有任何运气。

'typing':function(e){ 
     var c = w.length; //The word length, ex. halleluja 
     for (i=0;i<e.length;i++){ //foreach each 
      var o = e.substr(0, e.length); var l = w.substr(i,i+1); //my typing substr, and the char substr 
      if (o.toLowerCase() == l.toLowerCase()){ //correct 
       //highlight the letter. 
      } 
     } 
     }, 

词容器在这里输出该容器中的单词。

document.getElementById('wordContainer').innerHTML = w; 

Answer 1

试试这个：http://jsfiddle.net/tqHRA/

HTML：

<div id="preview">hello world</div> 

<input type='text' id='txt' />​ 

的JavaScript：

var source = 'hello world'; 

$(document).ready(function(){ 
    $('#txt').keyup(function(){ 
     var text = $(this).val(); 
     var replaced = source.replace(text, '<span class="highlight">' + text + '</span>'); 
     $('#preview').html(replaced); 
    }); 
});​