Question

我在下面有以下HTML代码： -

<p class="newPara" id="1_0_1">
    <ins data-inserted="1">The ability of </ins><ins data-inserted="2">computers to follow</ins> <ins data-inserted="2">a sequence of operations</ins><ins data-inserted="1">, called a program, </ins><ins data-inserted="2">make computers very flexible and useful.</ins>
</p>
<p class="newPara" id="1_0_2">
    <ins data-inserted="1">Peripheral devices</ins> <ins data-inserted="2">include input devices </ins><ins data-inserted="1">(keyboards, mice, joystick, etc.),</ins> <ins data-inserted="2">output devices (monitor screens, printers, etc.),</ins><ins data-inserted="1"> and input/output devices that perform both functions.</ins>
</p>

如果需要删除特定用户输入的文本时批量删除，则其他用户输入的剩余文本需要更改为删除模式而不会消失（标记为del标记）。如果选择了多个片段，这必须属于。

这应该在所有用例上处理，例如退格，删除，选择删除，选择退格。

我的预期结果是： - 如果用户id 1同时被选中并按删除键，我需要以下输出

<p class="newPara" id="1_0_1">
    <ins data-inserted="1">The ability of </ins><del data-deleted="1" data-inserted="2">computers to follow</del> <del data-deleted="1" data-inserted="2">a sequence of operations</del><ins data-inserted="1">, called a program, </ins><del data-deleted="1" data-inserted="2">make computers very flexible and useful.</del>
</p>
<p class="newPara" id="1_0_2">
    <ins data-inserted="1">Peripheral devices</ins> <del data-deleted="1" data-inserted="2">include input devices </del><ins data-inserted="1">(keyboards, mice, joystick, etc.),</ins> <del data-deleted="1" data-inserted="2">output devices (monitor screens, printers, etc.),</del><ins data-inserted="1"> and input/output devices that perform both functions.</ins>
</p>

我已经尝试了以下代码来跟踪单个newPara类的用户更改，它可以从以下代码中正常工作，

var sel = window.getSelection();
var $parent = $(sel.getRangeAt(0).commonAncestorContainer);
var $clone = $("<div/>").append(sel.getRangeAt(0).cloneContents());
var str = $clone.html();
sel.deleteFromDocument();    
var span = document.createElement("div");
$(span).addClass('tempSelectedDiv');
span.innerHTML = str;
sel.getRangeAt(0).insertNode(span);

$.each($('.tempSelectedDiv').contents(), function(i, val) {
    if(val.nodeName == 'INS' && val.getAttribute('data-ins-author') == abapp.userId){
        val.remove();
    }else{
        $(val).replaceWith('<del data-ins-author="'+insAuth+'" >' + $(val).text() +'</del>');
    }
});

但帮助我基于javascript选择为多个newPara类实现此代码

更新了jsfiddle中的工作示例，它为单个newPara类工作，在多个para（多个newPara）中遵循相同的主体

链接： - https://jsfiddle.net/ww81sbcs/

Answer 1

如何更换内联而不是每次都创建一个新的div？ fiddle和代码：

$(document).ready(function(){
  $('#deleteKey').click(function(){
  debugger;
    var sel = window.getSelection();
    var $cont = $(sel.getRangeAt(0).commonAncestorContainer);

    $cont.find('ins').each(function(idx) {
        if (this.getAttribute('data-inserted') == 1) {
            $(this).replaceWith(function(){
              return $("<del data-inserted='"+1+"' />").append($(this).contents());
            });
        } 
    });

  });
});

说明：

var $cont...：与您的代码一样，找到所选范围的公共父元素
$cont.find('ins').each(function(idx)：在此容器中搜索并使用ins标记
逻辑：如果它是＆＃34;我们的＆＃34; （我假设我们是用户1），将其删除。如果不是我们的，请不要碰它......

我认为以上为您提供了您期望的结果。如果您想准确获得在问题中发布的输出，请将用户ID替换为2而不是1。

Answer 2

试试这个。

我在这里所做的改变是

1：遍历所选区域的子元素的所有子元素。

2：在按钮元素之前插入动态创建的div。

$(document).ready(function() {
  $('#deleteKey').click(function() {
    var sel = window.getSelection();
    var $parent = $(sel.getRangeAt(0).commonAncestorContainer);
    var $clone = $("<div/>").append(sel.getRangeAt(0).cloneContents());
    var str = $clone.html();
    sel.deleteFromDocument();
    var span = document.createElement("div");
    $(span).addClass('tempSelectedDiv');
    span.innerHTML = str;

    $(span).insertBefore($(this));

    $('.tempSelectedDiv').children().each(function(i, val) {
      $(val).children().each(function(i, val) {
        if (val.nodeName == 'INS' && val.getAttribute('data-inserted') == 1) {
          $(val).html();
        } else {
          $(val).replaceWith('<del data-inserted="' + 1 + '" >' + $(val).text() + '</del>');
        }
      });
    });

    $('.tempSelectedDiv').contents().unwrap();
    $('.tempSelectedDiv').remove();
  });

  $('.tempSelectedDiv').contents().unwrap();
  $('.tempSelectedDiv').remove();
});

小提琴：https://jsfiddle.net/1qu5c5cf/

根据用户插入的数据属性，从<ins>标签中删除所选文本

2 个答案: