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