如何获得选择的标签？答案

【问题标题】：How to get the tag of selection?如何获得选择的标签？
【发布时间】：2020-06-23 03:06:38
【问题描述】：

我创建了一个函数，它将所选文本包装在 h1 标签中，并在再次调用时删除标签。如果您选择的区域大于先前的选择，该功能还会删除标签并重新创建。

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

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

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

也许我没有解释清楚，为了更好地展示，我创建了一个 sn-p 来证明这一点。发生了什么：

https://jsfiddle.net/narzantaria/2ex6bnq3/2/

这里也是相同的代码。点击按钮调用该函数：

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);
      }
    }
  }
}

问候。

【问题讨论】：

标签： javascript html

【解决方案1】：

您必须做一些事情来实现您想要的功能类型：

当您插入 H1 标签时，请为其添加标识符。将此标识符与选定的范围值一起存储。此外，使用布尔标志变量来显示正在突出显示的文本。
下次单击按钮时，检查标志变量是否为真。如果是，则使用先前选择的存储范围值，删除 h1 突出显示。
完成后，您现在可以将突出显示添加到新范围并重复第 1 步。

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

A flowchart to explain the steps above

【讨论】：

【解决方案2】：

您可以使用getSelection().anchorNode 和getSelection().focusNode 获取选择开始/结束的标签。

【讨论】：