Menu
I have a requirement for my web app to allow the user to "Print Selected Only". In other words, a user selects text and potentially images and then clicks this option. I've seen examples of getting selected text with Javascript, but haven't found a solution for getting the selected html itself.
As an example if I have a document like so:
<html>
<head>
</head>
<body>
<p>A bunch of text</p>
<img src="someimage.jpg" />
<p>Even more text</p>
</body>
</html>
If user highlights the image and the second paragraph, I'd want the javascript to return:
<img src="someimage.jpg" />
<p>Even more text</p>
Is this possible and how would one go about doing it?
Edit: I ended up going with a js library called Rangy for this.
562
Here is some code I found somewhere but I lost the actual link and this seems to work.
http://jsfiddle.net/Y4BBq/
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>The serialized HTML of a selection in Mozilla and IE</title>
<script type="text/javascript">
function getHTMLOfSelection () {
var range;
if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
return range.htmlText;
}
else if (window.getSelection) {
var selection = window.getSelection();
if (selection.rangeCount > 0) {
range = selection.getRangeAt(0);
var clonedSelection = range.cloneContents();
var div = document.createElement('div');
div.appendChild(clonedSelection);
return div.innerHTML;
}
else {
return '';
}
}
else {
return '';
}
}
</script>
</head>
<body>
<div>
<p>Some text to <span class="test">test</span> the selection on.
Kibology for <b>all</b><br />. All <i>for</i> Kibology.
</p>
</div>
<form action="">
<p>
<input type="button" value="show HTML of selection"
onclick="this.form.output.value = getHTMLOfSelection();">
</p>
<p>
<textarea name="output" rows="5" cols="80"></textarea>
</p>
</form>
</body>
</html>
There are some issues with the code (I tested with safari) where it doesn't return the exact selection.
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
