Javascript 获取所选文本节点的 HTML

Question

我得到了以下 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>

当我用鼠标选择(突出显示)这些单词时，我需要获取data-id属性。我使用以下代码:

var data = window.getSelection().getRangeAt(0).cloneContents();//this gets the data for all selected words 
console.log(data);

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

如果我选择 2 或 3 个单词，我需要分别获取每个单词的 data-id，就像使用 getRangeAt(0).cloneContents()。问题仅在于最后一个单词，它不返回 HTML 代码。

谢谢。

Answer 1

编辑:

之前有过类似的帖子，这里是一个可行的解决方案:

https://jsfiddle.net/hallleron/wg1pbwbf/2/

基本上，您循环遍历选择中的同级以获取每个值，然后将数组解析为字符串以将其显示在我的结果段落中以获得更好的视觉效果。

原件:

如果你想要一个无 jQuery 的版本，这里有一个 fiddle :https://jsfiddle.net/hallleron/wg1pbwbf/

整个 Javascript 部分如下:

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

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

因此，每次事件监听器检测到单击时，它都会获取选定的文本/范围并从对象中提取其 data-id 属性。