Question

我已经在几个小时内尝试过这项工作。

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

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

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

我尝试了一些没有运气的东西。

'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.
            }
         }
      },

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

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

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

1 个答案: