javascript - 按键时突出显示 HTML 元素中的字符

Question

我正在尝试使用 jQuery 在 javascript 中制作打字游戏，但遇到了问题。

如何在用户键入字符时突出显示他们键入的字符？

我的div中有例子

 <div id="theWord">tjurkey</div>

当用户开始输入 "tj.." 时，它应该突出显示 t，然后是 j，因为他们正在输入它。目前我被困在这里:

 $("body").keypress(function(e) {
if (e.which !== 0) {
    var t = String.fromCharCode(e.which);
     if ( t != undefined){ wordContainer += t.replace("undefined",""); }
        if ( wordContainer == theWord){
            alert("You typed the word" + theWord);
        }
}
});

例。这个词是“Tjurkey”，如果用户开始输入 P，它不应该突出显示任何内容，因为它是 TJurkey 而不是 P。

如果用户键入“T”开头，它应该像 Tjurkey 一样突出显示“T”，如果用户在其后键入“a”，它不应该突出显示它，因为这个词是 Tjurkey 而不是 Ta....当用户然后键入 j 它应该突出显示 j，因为这个词是 TJ...urkey.. 明白了吗？

Answer 1

演示:http://jsfiddle.net/cVaHb/

var $target = $('#theWord'),
    t = ''
$("body").keypress(function(e) {
if (e.which !== 0) {
    t += String.fromCharCode(e.which);
    var text = $target.text(),
        pos = text.search(t);
    if(pos > -1){
        $target.html(
            text.substring(0,pos)
            +'<span class="highlight">'+t+'</span>'
            +text.substring(pos+t.length)
        );      
    }else{
        $target.text(text);
    }
}
});

CSS:

.highlight {
    background: yellow;
}

编辑:如果你想忽略错误的字母，你可以使用

var $target = $('#theWord'),
    t = ''
$("body").keypress(function(e) {
if (e.which !== 0) {
    var newt = t + String.fromCharCode(e.which);
    var text = $target.text(),
        pos = text.search(newt);
    if(pos > -1){
        t = newt;
        $target.html(text.substring(0,pos)+'<span class="highlight">'+t+'</span>'+text.substring(pos+t.length));      
    }
}
});

演示:http://jsfiddle.net/cVaHb/1/