Javascript获取选定文本节点的HTML

我得到了以下HTML：

<div id="editable_phrase"> 
   <span data-id="42">My</span> 
   <span data-id="43">very</span> 
   <span data-id="1">first</span> 
   <span data-id="21">phrase</span>
</div>

它工作正常，只是当我选择最后一个单词短语时，它只选择没有html内容的文本。有没有办法解决这个问题？我可以使用jQuery

如果我选择2或3个单词，我需要分别获取每个单词的数据ID，就像getRangeAt0.cloneContents一样。问题只在于最后一个单词，它不返回HTML代码

谢谢。

我的 非常 第一 短语 $“可编辑”短语。单击“单击”，“跨距”，函数{ var res=$this.attr'data-id'； 警报； } 我的 非常 第一 短语 $“可编辑”短语。单击“单击”，“跨距”，函数{ var res=$this.attr'data-id'； 警报； } 编辑：

以前也有类似的线程，下面是一个可行的解决方案：

基本上，通过循环选择中的同级来获得每个值，然后将数组解析为字符串，以便在我的结果段落中显示它，以获得更好的视觉效果

原件：

如果您想要一个jQuery免费版本，下面是一个提琴：

整个Javascript部分如下所示：

document.getElementById('editable_phrase').addEventListener("click", getDataId);

function getDataId(){
     console.log(window.getSelection().anchorNode.parentElement.attributes[0].nodeValue);
}

因此，每次事件侦听器检测到单击时，它都会获取所选文本/span并从对象中提取其数据id属性。

编辑：

以前也有类似的线程，下面是一个可行的解决方案：

基本上，通过循环选择中的同级来获得每个值，然后将数组解析为字符串，以便在我的结果段落中显示它，以获得更好的视觉效果

原件：

如果您想要一个jQuery免费版本，下面是一个提琴：

整个Javascript部分如下所示：

document.getElementById('editable_phrase').addEventListener("click", getDataId);

function getDataId(){
     console.log(window.getSelection().anchorNode.parentElement.attributes[0].nodeValue);
}

---

因此，每次事件侦听器检测到单击时，它都会获取所选文本/span，并从对象中提取其数据id属性。

您也可以使用$this.dataid，但我不确定哪一个更快。您不想说这有什么帮助吗？或者这是一个秘密吗？它与选择一起工作吗？如果我选择突出显示一行中的3个单词，我需要获取它们的3个数据ID。您也可以使用$this.dataid，但我不确定哪一个更快。您不想说这有什么帮助吗？或者这是一个秘密？它与选择一起工作吗？如果我选择高亮显示一行中的3个单词，我需要获取它们的3个数据ID，它只选择一个元素，尽管我高亮显示2或3。如果我选择3个元素，我需要获取它们的所有数据idsAh好的，对不起，我弄错了。。。我将尝试尽快更新代码。它只选择一个元素，尽管我突出显示了2或3。如果我选择3个元素，我需要获取它们的所有数据idsAh好的，对不起，我弄错了。。。我会尽快更新代码。