Question

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

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

我在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

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

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

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

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

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/

Answer 2

这是一个更清洁的解决方案

http://jsfiddle.net/bTDsd/6/

$(document).ready(function() {
    var orig = $('#original').html();
    $('#textbox').val('');
    $('#textbox').keyup(function(event) {
        var vals = $(this).val().split(' '),
            re,
            newText = orig;

        for (var i = 0, l = vals.length; i < l; i++) {
            if (!vals[i]) { continue; }
            re = new RegExp('\(^|[^>]\)\(' + vals[i] + '\\b\)', 'i');
            newText = newText.replace(re, '$1<del>$2</del>');
        }

        $('#original').html(newText);
    });
});

Answer 3

有一个while循环重试你的替换功能。完成后休息。请享用！ g标志也是一个选项。

Answer 4

这是一个使用不同的div存储已经使用过的剩余单词和单词的单词。在我看来，寻找没有被删除的单词会比分离它们更加困惑和困难。

脚本：

$(function(){
    var orig = $('#original').html();
    $('#original').hide();
    $('#remaining').html(orig);
    $('#textbox').val('');
    $('#textbox').keyup(function(event) {
        var originalWords = $('#original').text().split(" ");
        var words = $(this).val().split(" ");
        var selectedWords = [];
        $.each(words, function(idx, word) {
            var index = originalWords.indexOf(word);
            if(index > -1) {
                selectedWords.push(word);
                originalWords.splice(index, 1);
            }
        });      

        addWords(originalWords, $('#remaining'));
        addWords(selectedWords, $('#selected'));        
    });
});

addWords = function(words, container) {
    var allWords= '';
    $.each(words, function(idx, word) {
      allWords= allWords+ ' ' + word;
    }); 
    container.text(allWords);
}

HTML：

<div id="original" >StackOverflow is a programming site. programming is fun</div>
<div id="remaining"></div>
<div id="selected" style="text-decoration: line-through;"></div>
<input id="textbox" />

http://jsfiddle.net/qdWGw/

它可以使用一些优化，但它应该可以工作。

Jquery黑客攻击文本框中输入的字符串的一部分

4 个答案: