javascript - Jquery hack删除文本框中输入的字符串的一部分

Question

我正在尝试执行以下操作:

给出了一个乱码，用户必须改正

我在一个 div 中写了乱七八糟的句子，还有一个文本框，我可以在其中获取用户的答案。

现在我想要的是使用 jquery，无论他在文本框中输入什么，都会从问题中删除 (abc)，以便用户知道他已经选择了哪些词。

这是我的代码:

$(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 是包含文本的 div 的 id，textbox 是文本框的 id

这适用于没有重复单词的情况。但是，如果一个词出现不止一次，则只会删除第一次出现的词。

对于一个词多次出现的情况，你能给我一个解决方案吗？

例如，如果文本是:张贴的网络图片可以在错误的站点上使用，目的是导致社会出现很多问题

当我输入:“networking sites on”字样 networking, sites 和 on 的第一次出现应该被删除然后当我再次输入时，它的第二次出现应该被删除

Answer 1

更新，基于以下评论:

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

示例: http://jsfiddle.net/E25Nd/3/