如果選定的文本是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？

回答

相關問題