Javascript 替换HTML，然后将文档片段添加回HTML

我正在尝试创建一个高亮工具，其工作原理如下：

• 用户首先选择一系列文本
• 然后单击其中一个颜色按钮，所选文本的背景将高亮显示
• 然后他们选择另一个文本范围
• 现在，当他们单击按钮时，所有html都将替换为html的缓存版本（无突出显示）
• 然后，高亮显示的新选定文本被追加回新的html中

这样，一次只能突出显示一个文本范围

问题：

我很难理解API和API

目前我无法将突出显示的文本添加回新的html。。。我只是将其附加到document.body

到目前为止我拥有的：

Q:

---

如何添加高亮显示的节点。。。这看起来像是将一些随机文本放回一个新的html文档中，使其处于相同的位置。

如果目标是一次只有一个突出显示，我会选择一种不太复杂的方法：

• 添加突出显示时
• 检查html中的上一个突出显示
• 找到时将其删除

为此，请使用属性或类标记突出显示的

s（或者最好存储引用）：

添加删除此类元素的方法：

clearHighlight: function() {
  var selection = document.querySelector(".js-highlight");

  if (selection) {
    selection.parentElement.replaceChild(
      document.createTextNode(selection.innerText),
      selection  
    );
  }
}

然后，在用highlight元素替换

范围

之前，请调用

clearHighlight

例如：

另一种选择：

我还尝试了另一种尊重“缓存HTML”逻辑的方法，但发现它过于复杂。该方法的基本原理是：

• 检查所选内容的

  parentElement

  的查询路径
• 存储所选内容的开始索引和结束索引
• 用缓存的HTML字符串替换HTML
• 通过存储的查询路径查找选择的新注入父元素
• 根据选择的开始和结束索引，将其

  innerText

  拆分为1、2或3个

  textNodes

• 将表示所选内容的文本节点替换为突出显示的

显示如何存储范围祖先的查询路径的示例：

function getPathUpToSelector(selector, element, path) {
  var parent = element.parentElement;

  if (parent && !element.matches(selector)) {
    var index = Array.from(parent.children).indexOf(element) + 1;
    path.push("*:nth-child(" + index + ")");

    return getPathUpToSelector(selector, parent, path);
  }

  return [selector].concat(path).join(" > ");
}

---

您想克隆整个内容的具体原因是什么？注释掉

highlight部分中的最后三行似乎可以产生所需的行为。。。是的，原因是我在任何一个给定的时刻只想要一段选定的文字。。。因为它是我可以强调的所有地方。。。我只想一次选择一个范围。你看了吗？我看到了。。。出于教育原因，试图赤裸裸地这样做。。。但如果我不能找到一个可行的解决方案，我会仔细研究这个问题。谢谢！这太棒了。我把事情复杂化了，这很有效。现在唯一的问题是，如果我在两个节点上选择文本，那么HTML标记将被销毁。。。我在这里开始了一个新问题：
clearHighlight: function() {
  var selection = document.querySelector(".js-highlight");

  if (selection) {
    selection.parentElement.replaceChild(
      document.createTextNode(selection.innerText),
      selection  
    );
  }
}

function getPathUpToSelector(selector, element, path) {
  var parent = element.parentElement;

  if (parent && !element.matches(selector)) {
    var index = Array.from(parent.children).indexOf(element) + 1;
    path.push("*:nth-child(" + index + ")");

    return getPathUpToSelector(selector, parent, path);
  }

  return [selector].concat(path).join(" > ");
}