javascript - 根据用户插入的数据属性，从 标签中删除选定的文本

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>

在批量删除的情况下，当需要删除特定用户输入的文本时，其他用户输入的剩余文本需要更改为删除线模式并且不会消失(ins 标签到 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...: 和你的代码一样，找到所选范围的公共(public)父元素
• $cont.find('ins').each(function(idx): 在此容器中搜索并处理每个带有ins标签的元素
• 逻辑:如果是“我们的”(我假设我们是用户 1)，则将其删除。如果不是我们的，请不要碰它...

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