擊中一個單詞然後突出顯示

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); 
    }); 
});​