window.getSelection include HTML tag

Question

说HTML页面包含此行

head<div class='myClass'>select me</div>tail

它在页面上显示为 headselect metail，

var sel = window.getSelection ? window.getSelection() : document.selection.createRange();
var html = "";
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
console.log(html);

当用户选择"选择我"时， 以下代码返回

select me

当用户选择"Dselect met"时， 然后代码返回

d<div class='myClass">select me</div>t

如何通过选择"选择我"返回<div class='myClass">select me</div>？

同时不影响原始文本选择，如选择"再次选择">

<p>this select again with no HTML tag</p>

对于IE来说document.selection.createRange()呢？

Answer 1

欢迎！你正在尝试做的事情是可能的，但可能并不总是按照你想要的方式行事。我附上了一个示例，但基本上您想查看选择的第一个和最后一个节点。如果它们相同(即您的选择都在同一节点中(，则可以查看您选择的内容是否与该节点的完整内容相同。

不过，您将对标记结构做出很多假设。老实说，我想不出这个用例。如果您确定自己有一个，那就去做吧，但也要考虑您的其他选择。

window.addEventListener("mouseup", function() {
var sel = window.getSelection ? 
window.getSelection() :   
document.selection.createRange();

var display = document.getElementById('selected-output');  
var output = sel;  
// If the starting node of the selection is the
// same as the ending node of the selection 
// (i.e. the selection doesn't cross nodes)
if (sel.anchorNode && (sel.anchorNode == sel.extentNode)) {
if (sel.toString() == sel.anchorNode.textContent) {
output = sel.anchorNode.parentElement.outerHTML;
}
}

display.innerText = output;
});

body {
background-color: #ffffff;
font-family: sans-serif;
padding: 1em;
}
.select-this {
background-color: #f2f2f2;
padding: 1em;
margin: 1em 0;
}
.explanation {
}
.selected {
background-color: #dddddd;
border-radius: 3px;
border: 1px solid #aaaaaa;
padding: 1em;
}

<div class="select-this">
<div>Here is some text. You can <em>select</em> it if you want.</div>
A div just closed.
<h1>This is an H1 tag.</h1>
<p>This is a P tag.</p>
<p>I'm just giving us some stuff to select. 
<strong>Lorem ipsum,</strong> et cetera.</p>
</div>
<p class="explanation">
If you select something above, it should show up here:</p>
<div class="selected">
<div id="selected-output">
</div>
</div>