Highlighting characters in an HTML element on keypress

Question

I am trying to make a typing game in javascript with jQuery but facing a issue.

How can I highlight the character the user types when they type it?

I have example in my div

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

When the user starts typing "tj.." it should highlight t, then j, as they type it. Currently I am stuck here:

 $("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);
        }
}
});

Ex. the word is "Tjurkey", if user start typing P it shouldn't highlight anything, because It's TJurkey and not P.

If user types "T" to start with it should highlight the "T" like Tjurkey, if user type "a" after that it shouldn't highlight it, because the word is Tjurkey and not Ta.... when the user then type j it should hightlight the j, because the word is TJ...urkey.. got the point?

You want to highlight the current character typed inside the `#theWord`? — putvande, Aug 13 '13 at 12:28
I think (but i might be wrong) you should split the word in spans. — MJC, Aug 13 '13 at 12:30
What is the user typing in? What kind of highlighting are you applying? — nbrooks, Aug 13 '13 at 12:30
I want, when user type "t" (the first letter in the word in the theWord-container it highlights "t", because the user has typed it. — jesper, Aug 13 '13 at 12:32
I think this might be helpfull http://stackoverflow.com/a/7959156/1696560 — Anton, Aug 13 '13 at 12:35
It works but after 3 letters typed it start to output ighlight">fighlight">ridge .... the word is fridge. — jesper, Aug 13 '13 at 12:37

Oriol · Accepted Answer · 2013-08-13T14:25:46.293

Demo: 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;
}

Edit: If you want to ignore wrong letters, you can use

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

Demo: http://jsfiddle.net/cVaHb/1/

It should just ignore if i type wrong, not restarting the whole thing. Can you fix it? Try typing Tju.... and then type a, then it reset its, it should just ignore it, and when i then type r (which is the next letter again) it should highlight again. — jesper, Aug 13 '13 at 13:01
@jesper I have fixed it. But I'm not sure if you want this behavior or not: when you type (for example) `u`, `u` is highlighted, even if you haven't typed `t` and `j` — Oriol, Aug 13 '13 at 14:28

zahirdhada · Answer 2 · 2013-08-13T13:12:13.503

1

Here, to get you started

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

check it out here:

http://jsfiddle.net/zahirdhada/UBbF7/1/

edited Aug 13 '13 at 13:12

answered Aug 13 '13 at 12:37

zahirdhada

405
4
14

It should just ignore if i type wrong, not restarting the whole thing. Can you fix it? Try typing Tju.... and then type a, then it reset its, it should just ignore it, and when i then type r (which is the next letter again) it should highlight again. – jesper Aug 13 '13 at 13:00

score 0 · Answer 3 · answered Aug 13 '13 at 12:31

You can get the typed characters and find the starting and ending points of those in your string. Then you have to wrap that text with a span

ex: if user typed tj you should write a script to fill

<div id="theWord"><span style="color:red">tj</span>urkey</div>

Highlighting characters in an HTML element on keypress

3 Answers3