我得到以下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
属性。