Question

I am trying to do the following:

A jumbled sentence is given and the user has to correct it

I have the jumbled sentence written inside a div and there is a text-box where in i get the user’s answer.

Now what i want is using jquery whatever he enters in the text-box gets strikedout (abc) from the question so that the user knows what words he has already selected.

This is my code:

$(document).ready(function() { 
    var orig=$('#original').html();
    $('#textbox').val(''); 
    $('#textbox').keyup(function(event) {
    var x=$('#textbox').val().split(" ");   
    $('#original').html(orig);
    for(var i=0;i<x.length;i++){
    $('#original').html($('#original').html().replace(x[i],'<del>'+x[i]+'</del>'));
    }
   }
  });

});

original is the id of the div containing the text and textbox the id of the textbox

This works fine for the cases where no word is repeated. But, if a word occurs more than once only the first occurrence of it is strikedout.

Can you give me a solution for the case where there are multiple occurences of a word?

For example, if the text is: posted of networking pictures can used on wrong sites on purposes leading social to lot for problems be

when I enter: “networking sites on” words networking, sites and first occurence of on should be striked off
then when i enter on again the second occurence of it should be striked out

Answer 1

Updated, based on the the comments below:

$(document).ready(function() {
    var orig = $('#original').html();
    $('#textbox').val('');
    $('#textbox').keyup(function(event) {
        $("#original").html(orig);

        var x = this.value.split(" ");

        for (var i = 0; i < x.length; i++) {
            $("#original").contents().filter(function() {
                return this.nodeType === 3 && this.nodeValue.indexOf(x[i]) >= 0;
            }).first().replaceWith(function() {
                var re = new RegExp("\\b" + x[i] + "\\b");
                return this.nodeValue.replace(re, "<del>" + x[i] + "</del>");
            });
        }
    });
});

Example: http://jsfiddle.net/E25Nd/3/