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


除了我选择最后一个单词phrase时,它只选择没有html内容的文本,它工作正常。任何想法如何解决?我可以使用jQuery。

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

谢谢。

最佳答案

编辑:

之前有一个类似的线程,这是一个可行的解决方案:

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

基本上,您遍历选择中的兄弟姐妹以获得每个值,然后将数组解析为字符串以将其显示在我的结果段落中,以获得更好的视觉效果。

原版的:

如果您要使用无jQuery版本,请尝试以下操作: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属性。

10-05 20:42
查看更多