javascript – Jquery hack to strikeout在文本框中输入的字符串的一部分

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

给出了一个混乱的句子,用户必须纠正它

我在div中写了一个混乱的句子,并且有一个文本框,我在其中得到用户的答案.

现在我想要的是使用jquery,无论他在文本框中输入什么,都会从问题中获取strikedout(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,文本框的id

这适用于没有重复单词的情况.但是,如果一个单词出现不止一次,那么它的第一次出现就会被删除.

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

例如,如果文本是：发布网络图片可以在错误的网站上使用的目的导致社会问题很多

当我进入时：“联网网站”字样网络,网站和第一次出现应该被打破
然后,当我再次进入时,它的第二次出现应该被删除

解决方法:

根据以下评论更新：

$(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/