javascript - 単語を打ってからハイライト

Question

私はこの仕事をするために数時間で試みました。

正しい場合は文字を強調表示する関数が必要です。

たとえば、単語は「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);
    });
});​