javascript - 处理选择标记之间的交集

Question

我有一个 标记按钮 在 UI 上，单击哪个，任何用户选择都标记为红色。这里没有问题。我通过 document.execCommand("insertHTML") 实现了这一点

但是我还有一个额外的要求，如果创建新的选择，它是旧选择标记的交集，旧选择的红色标记应该消失。

例如:

在下图中:标记了 this 和 testing。现在，如果我从一开始就选择他的测试并单击标记，那么旧的标记和测试应该会消失，只有他的测试应该被标记，因为有一个交叉点。



代码:

const button = document.getElementById("button");

button.addEventListener('click', ()=>{
	const s = window.getSelection();
  const selectionStr = s.toString();
  document.execCommand("insertHTML", false, `<span class="bg-red">${selectionStr}<span>`);
})

.bg-red {  
background: red;
}

<div contenteditable="true">
 this is testing  this is testing  this is testing
</div>

<button id="button">mark</button>

Answer 1

您可以找到 startContainer & endContainer带有 getRangeAt 的选定文本，并将它们与 contentContainer 进行比较.
如果它们不等于 contentContainer ，然后删除 bg-red类(class)。

const button = document.getElementById("button");

button.addEventListener('click', ()=>{
  let contentContainer = document.getElementById("contentContainer");
  const selection = window.getSelection();
  if (selection.rangeCount > 0){
    let startContainer =  selection.getRangeAt(0).startContainer.parentNode;
    let endContainer =  selection.getRangeAt(0).endContainer.parentNode;
    if(startContainer != contentContainer)
      startContainer.classList.remove('bg-red')
    if(endContainer != contentContainer)
      endContainer.classList.remove('bg-red')
  }
  const selectionStr = selection.toString();
  document.execCommand("insertHTML", false, `<span class="bg-red">${selectionStr}<span>`); 
})

.bg-red {  
  background: red;
}

<div id="contentContainer" contenteditable="true">
 this is testing  this is testing  this is testing
</div>

<button id="button">mark</button>