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);

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

如果我选择2或3个单词，我需要分别将data-id s分别添加到每个单词，就像getRangeAt(0).cloneContents()一样。问题只出在最后一个单词上，它不会返回HTML代码。

谢谢。

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>
<script>
    $('#editable_phrase').on('click','span',function(){
        var res = $(this).attr('data-id');
        alert(res);
    })
</script>

Answer 2

修改

之前有过类似的帖子，这是一个有效的解决方案：

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

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

<强> ORIGINAL：

如果你想要一个免费的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属性。

Javascript获取所选文本节点的HTML

2 个答案: