在Javascript中使用document.selection时，同时创建多个选择

我知道如何使用document.selection来突出显示。为了

但有些事情我不知道如何实现。 假设我同时创建了四个具有相同内容的层。 我想在控制层上选择一个句子，而在其他三层中的所有相同句子也将被选择。（见下图）

选择之后，我想弹出一个菜单（我可以这样做），并根据按下的按钮获取DOM元素（参见下图）

---

谁能告诉我如何做到这一点？或者就是做不到？如果有人能回答我的问题，我将不胜感激。

这是有可能的，我将感谢SO用户的输入，因为他对JS范围/选择非常了解，但我已经介绍了我的部分解决方案

您不必选择4个层，只需将

startOffset

和

endOffset

存储在一个外部对象中，该对象在

mouseup

上更新即可。这样做的唯一效果是，当用户单击图层按钮时，用户的选择将仅获得

span

的颜色

优点是您现在可以简单地使用DOM Textnodes，而不是范围/选择（对我来说更复杂）。 我选择在按钮上查找具有

数据层

属性的层，并在层本身上查找相应的

id

。我通过切片层中文本节点的文本内容来处理“选定范围”的“附加”，如下所示：

layer.innerHTML = txt.slice(0, selText.start) 
     + '<span class="MT" style="background-color: #80deea">'
     + txt.slice(selText.start, selText.end) + '</span>'
     + txt.slice(selText.end, txt.length);

---

非常感谢你的回答！还感谢您为我节省测试时间的注释。很好的答案和解释=）

layer.innerHTML = txt.slice(0, selText.start) 
     + '<span class="MT" style="background-color: #80deea">'
     + txt.slice(selText.start, selText.end) + '</span>'
     + txt.slice(selText.end, txt.length);

// this object will hold the start & end offsets of selection value
var selText = false; 

// selText will be updated on mouseup
document.body.onmouseup = getSelText; 

// on button click, selText will be highlighted
document.body.onclick = function(e) { 
  var target = e.target || e.srcElement, range, layer, txt;

  // only do if it's a layer button & the selection is non-empty
  if (target.getAttribute('data-layer') && selText !== false) {

     // first remove previous spans, they break the startOffset & endOffset of the selection range
     cleanSelection();

     // get the clicked layer
     layer = document.getElementById(target.getAttribute('data-layer'));
     // this assumes that the first node in the layer is a textNode
     txt = layer.firstChild.nodeValue;
     // let's append the selection container now
     layer.innerHTML = txt.slice(0, selText.start) 
     + '<span class="MT" style="background-color: #80deea">'
     + txt.slice(selText.start, selText.end) + '</span>'
     + txt.slice(selText.end, txt.length);

    // ...and empty the 'real selection'
    window.getSelection().collapse(); 
    // log results to console
    console.log('From char ' + selText.start + ' to char ' + selText.end + ', in ' + layer.id);
  }

};
function getSelText () {
    var seleted_str = (document.all) ? document.selection.createRange().text : document.getSelection(), stringToBeHighlighted;
    if(seleted_str !== "") {
        stringToBeHighlighted = seleted_str.getRangeAt(0);
        selText = {
          start: stringToBeHighlighted.startOffset,
          end: stringToBeHighlighted.endOffset
        };
    } else {
        selText = false;
    }
}
function cleanSelection() {
  var getText, mtSpan = document.getElementsByClassName('MT');
  for ( var i = 0; i < mtSpan.length; i++) {
    getText = mtSpan[i].innerHTML;
    mtSpan[i].previousSibling.nodeValue = mtSpan[i].previousSibling.nodeValue + getText + mtSpan[i].nextSibling.nodeValue;
    mtSpan[i].parentNode.removeChild(mtSpan[i].nextSibling);
    mtSpan[i].parentNode.removeChild(mtSpan[i]);
  }
}