Javascript 如何获得选择的标签？

我创建了一个函数，将所选文本包装在h1标记中，并在再次调用时删除标记。如果选择的区域大于上一个选择，该函数还会删除标记并再次创建

但是，如果从所选内容创建标题后，选择另一个文本，然后再次选择该单词，则标记不会包含在所选内容中（尽管所选内容与所创建的标题完全一致）。我使用选择和范围方法

事实证明，通过重复选择，标记不会落入选择。 我还尝试使用正则表达式进行自动替换，但这种方法并不好，因为一个短语或一个单词可能在文本中出现多次

请告诉我，Javascript中是否有任何方法允许我们找到与此选择匹配的节点

也许我解释得不好，为了更好地展示，我创建了一个片段来演示这一点。发生了什么：

这里也有相同的代码。通过单击按钮调用该函数：

document.getElementById('h1-trigger').addEventListener('click', function () {
  headerFormatter();
});

function headerFormatter() {
  let newTag = document.createElement('h1');
  if (window.getSelection) {
    let sel = window.getSelection();
    if (sel.rangeCount) {
      let range = sel.getRangeAt(0).cloneRange();
      // create an object from range for querying tags
      let rangeProxy = sel.getRangeAt(0).cloneContents();
      if (rangeProxy.querySelector('h1')) {
        let tagContent = rangeProxy.querySelector('h1').innerHTML;
        // compare selection length with queried tag length
        if (range.startOffset == 1) {
          tagContent = tagContent.replace(/(<([^>]+)>)/ig, "");
          range.deleteContents();
          range.insertNode(document.createTextNode(tagContent));
          sel.removeAllRanges();
          sel.addRange(range);
          return;
        }
        else {
          let rangeToString = range.toString().replace(/(<([^>]+)>)/ig, "");
          range.deleteContents();
          range.insertNode(document.createTextNode(rangeToString));
          sel.removeAllRanges();
          sel.addRange(range);
          return;
        }
      } else {
        range.surroundContents(newTag);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  }
}

document.getElementById（'h1-trigger'）.addEventListener（'click'，函数（）{
headerFormatter（）；
});
函数headerFormatter（）{
设newTag=document.createElement（'h1'）；
if（window.getSelection）{
让sel=window.getSelection（）；
如果（选择范围计数）{
让range=sel.getRangeAt（0.cloneRange（）；
//从范围创建对象以查询标记
让rangeProxy=sel.getRangeAt（0.cloneContents（）；
if（rangeProxy.querySelector（'h1'））{
让tagContent=rangeProxy.querySelector（'h1'）.innerHTML；
//将选择长度与查询的标记长度进行比较
如果（range.startOffset==1）{
tagContent=tagContent.replace（/（]+）>）/ig，“”；
range.deleteContents（）；
range.insertNode（document.createTextNode（tagContent））；
选择removeAllRanges（）；
选择添加范围（范围）；
返回；
}
否则{
让rangeToString=range.toString（）.replace（/（]+）>）/ig，“”；
range.deleteContents（）；
range.insertNode（document.createTextNode（rangeToString））；
选择removeAllRanges（）；
选择添加范围（范围）；
返回；
}
}否则{
周围内容物的范围（新标签）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
}
}

---

注意。

您可以使用

getSelection（）.anchorNode

和

getSelection（）.focusNode

在选择开始/结束的位置获得标记。您需要做一些事情来实现所需的功能类型：

插入H1标记时，向其添加标识符。将此标识符与选定的范围值一起存储。此外，还可以使用布尔标志变量来显示高亮显示的文本

下次单击该按钮时，请检查标志变量是否为true。如果是，请使用上一选择中存储的范围值，删除h1高亮显示

完成后，现在可以将高亮显示添加到新范围并重复步骤1

这可能是一个较长的方法，但它可能比您当前的方法更有效。 我希望这有帮助。谢谢

解释上述步骤的流程图