window.getSelection include HTML tag

Question

say html page contain this line

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

it appear on the page as 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);

when user select 'select me', the following code return

select me

when user select 'dselect met', then the code returns

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

how do I return <div class='myClass">select me</div> by just selecting 'select me' ?

while not affecting raw text selection like selecting 'select again'

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

what about document.selection.createRange() ? for IE

Answer 1

Welcome! The thing you're trying to do is possible, but might not always behave the way you want it to. I've attached an example, but basically you want to look at the first and last node of the selection. If they're the same (ie your selection is all within the same node), you can then look to see if the content you selected is the same as the full content of that node.

You're going to be making a lot of assumptions about the markup structure though. I can't think of a use case for this, to be honest. If you're sure you have one, go for it, but consider your other options as well.

 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 // (ie 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>