获取选定文本的锚点名称答案

【问题标题】：Get the name of anchor for selected text获取选定文本的锚点名称
【发布时间】：2019-12-18 01:52:34
【问题描述】：

我正在尝试获取网页上所选文本的附加信息，该网页具有以下 HTML（简体）：

    <h2 class="level2"><span>part 1</span> AAAA<a name="p1"> </a></h2>
    <h3><strong>N1 </strong><a name="NameX"> </a>TitelX</h3>
    <p><a name="N1S1"> </a>(1) Text1.</p>
    <p><a name="N1S2"> </a>(2) Text2.</p>
    <p><a name="N1S3"> </a>(3) Text3.</p>
    <p><a name="N1S4"> </a>(4) Text4.</p>
    ...

如果用户选择了一些文本（f.e Text1 或其中的一部分），我需要的是（在 Tampermonkey for Chrome 中）锚点上的名称（f.e N1S1）。

到目前为止，我已经获得了选定的文本（按下按钮后）：

    $(document).ready(function() {
        $('body').append('<input type="button" value="Button 1" id="b1">')
        $('#b1').css('position', 'fixed').css('bottom', 0).css('left', 0);
        $('#b1').click(function(){
            var x = document.getSelection()
            alert(x)
        });
    });

我需要找到选择的锚名称。

【问题讨论】：

你确定你的问题是关于java（你的标签就是这样）吗？你知道Java != JavaScript吗？
不，我不确定，您是否建议将标签更改为 javascript？
这取决于你真正想要什么，但基于 tempermonkey 让我们编写 JavaScript（至少据我所知）的事实，那么可能是的，IMO 你的问题可能不是关于 Java 而是关于 JavaScript .
如果选择从Text1开始到Text3结束会发生什么？
感谢您的评论，Nickolay 的回答做得恰到好处。

标签： javascript html tampermonkey

【解决方案1】：

使用anchorNode 和focusNode 确定选择的开始/结束位置（请参阅Selection documentation）
不要忘记处理无选择和选择跨越多个节点的情况（如@AuxTaco 的评论）
拥有#text 节点后，其中包含“(1) Text1.”；获取锚名称可以像 .parentNode.firstElementChild.name 一样简单 - 随时适应您的需求。

function getLinkName() {
  let sel = window.getSelection();
  if (!sel.anchorNode) {
    return "nothing selected";
  }
  if (sel.anchorNode != sel.focusNode) {
    console.log(sel.anchorNode.tagName, sel.focusNode.tagName);
    return "selection spans multiple nodes";
  }
  
  // this will be the <p> element if the text inside it is selected
  let selectionParent = sel.anchorNode.parentNode;
  
  return selectionParent.firstElementChild.name;
}

function run() {
  alert(getLinkName());
}

<h2 class="level2"><span>part 1</span> AAAA<a name="p1"> </a></h2>
    <h3><strong>N1 </strong><a name="NameX"> </a>TitelX</h3>
    <p><a name="N1S1"> </a>(1) Text1.</p>
    <p><a name="N1S2"> </a>(2) Text2.</p>
    <p><a name="N1S3"> </a>(3) Text3.</p>
    <p><a name="N1S4"> </a>(4) Text4.</p>
    
    <button onclick="run()">Check selection</button>

【讨论】：