如果选定的文本是HTML，如何使用JavaScript获取选定的DOM？

有一个div在页面上显示HTML。我可以使用 window.getSelection();得到选定的文本，它返回节点列表。也试过window.getSelection().toString();它返回字符串。如果选定的文本是HTML，如何使用JavaScript获取选定的DOM？

我需要的是选择DOM而不是文本或节点列表。我想添加数据子属性，当仅使用javascript选择文本时。

所以，如果显示的文字是<div>xyz</div>，选择后应该变成<div data-child="id-1">xyz</div>。

来源

2017-10-22 K T

*“it returns node list”* - 是不是返回Selection对象？无论如何，如果用户选择一个更大范围的文本，包括一些来自你的div和一些来自div之前或之后的元素，你想要做什么？ – nnnnnn

@nnnnnn我会放弃这个选择。用户将被允许只选择一个完整的节点。 –

相关 - https://stackoverflow.com/q/5083682/104380 – vsync

你可以试试这个方法。（如果只有你在你的DIV已经直接文本节点）

window.getSelection().focusNode.parentElement  //returns the selected element

，您可以设置ATTR像

window.getSelection().focusNode.parentElement.setAttribute('data-id', 'id-1');

您可以在其包装'mouseup'event with your current div

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <div id="myDiv"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id natus voluptatibus eum explicabo soluta excepturi? 
    </div> 
    <div id="myDiv2"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id natus voluptatibus eum explicabo soluta excepturi? 
    </div> 

    <script> 
     var myDiv = document.getElementById('myDiv') 
     myDiv.addEventListener('mouseup', function(){ 
      window.getSelection().focusNode.parentElement.setAttribute('data-id', 'id-1'); 
     }) 
    </script> 
</body> 
</html>

或者这是最好的方法来添加attr到选定的'div'只，如果有ma ny divs

来源

2017-10-22 07:36:36 SharifClick

如果选定的文本是HTML，如何使用JavaScript获取选定的DOM？

回答

相关问题