删除文本框中输入的字符串的一部分

Jquery hack to strikeout part of a string entered in a text-box

本文关键字：字符串 一部分 输入 文本 删除      更新时间：2023-09-26

我正在尝试做以下事情:

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

我有一个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

这对于没有重复单词的情况很好。但是，如果一个单词出现多次，则只删除第一次出现的单词。

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

例如，如果文本是:发布的网络图片可能会被错误的网站用于某些目的，从而导致社会对问题的关注

当我输入:"networking sites on"字样networking时，网站和第一次出现的on应划掉然后当我再次输入的时候第二次出现的内容应该被删掉

根据以下评论更新:

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

这是一个更干净的解决方案

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);
    });
});

有一个while循环重试您的替换函数。做完就休息。享受吧!g标志也是一个选项

使用不同的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/

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

相关文章：