Jquery взломать зачеркнутую часть строки, введенной в текстовое поле

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 текстового поля.

Это хорошо работает для случаев, когда ни одно слово не повторяется. Но если слово встречается более одного раза, исключается только его первое вхождение.

Можете ли вы дать мне решение для случая, когда слово встречается несколько раз?

Например, если текст: размещенные сетевые картинки могут использоваться на неправильных сайтах в целях, ведущих к социальным проблемам, проблемы могут быть

когда я вхожу: слова "сетевые сайты в сети" должны быть вычеркнуты. затем, когда я вхожу снова, второй случай должен быть вычеркнут

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

Вот тот, который использует другой 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/

Можно использовать некоторую оптимизацию, но она должна работать.

Answer 4

Сделайте цикл while, повторяя вашу функцию замены. Перерыв, когда сделано. Наслаждайтесь! Флаг g также является опцией.