+ + +
+ +
+
+
+
+ +
+
+
+ +
19
+ + + + + + + + +
+ +
+ + + +
+ +
+ +

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.

+
+ +
+
+
+ +
+
+
+ +
+
+
+ + +
+ + | + improve this question + | + + | +
+ +
+ +
+
+
+ + +
+
+
+ +
+ + + + +
+
+
    + +
  • +
    +
    + 2 +
    +
    +
    +
    + + You can probably figure out what elements to include, but then you'll have to take that part of the page and use it to build up another page for printing. That seems like the hard part, in general, especially if there are framework-related container elements around lots of the body for organizational and styling purposes. + +– Pointy + Feb 22 '11 at 20:48 +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + + I don't think this should be much of a problem actually. The data we're displaying is laid out fairly simply in block level elements. The only thing we might need to watch out for is partial table selections. Thanks for the heads up though. + +– Craig M + Feb 23 '11 at 18:05 +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + + This is duplicate of How to get selected html text with javascript? + +– Dan Dascalescu + Jun 1 '15 at 15:21 + + + +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + + This question was asked first. The other question is the duplicate. + +– Craig M + Jun 1 '15 at 21:12 +
    +
    +
    • + +
+
+ + +
+
+
+ + +
+
+
+
+ +
+ + +
+
+
+

+ 3 Answers + 3 +

+
+
+
+ + Active + + Oldest + + Votes +
+ +
+
+ +
+ + + + +
+
+
+
+ +
40
+ + + +
+ +
+ + + + +
+ +
+ + + +
+ +
+

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>
+
+ +
+

enter image description here

+
+ +

There are some issues with the code (I tested with safari) where it doesn't return the exact selection.

+ +
+

enter image description here +enter image description here +enter image description here

+
+
+
+
+ +
+ + +
+ + | + improve this answer + | + + | +
+ +
+
+
+ + +
+ + +
+
+
+ +
+ + + + +
+
+
    + +
  • +
    +
    + 1 +
    +
    +
    +
    + + The problems are due to shortcomings in WebKit rather than the code itself. + +– Tim Down + Feb 23 '11 at 1:12 +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + + Thanks Tim for clarifying this + +– Stofke + Feb 23 '11 at 23:01 +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + + I ended up going with a plugin called Rangy to do this, but this code did the trick too. So, I'm giving you the credit for the answer in case anyone else looking for this answer doesn't want to use Rangy. + +– Craig M + Mar 7 '11 at 20:49 +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + + @TimDown: "shortcomings in WebKit". It seems that even Shorty cannot handle this crossbrowser way. I tested at rangy.googlecode.com/svn/trunk/demos/core.html in Chrome. When I select <b>Association football</b>, only the inner text is got, when I press Get HTML. But if I select the next space also, then the full b-block is selected in Chrome. Do you know how this could be done programmatically: Expand selection by one character -> Get HTML -> contract selection back? + +– Timo Kähkönen + May 3 '14 at 17:29 +
    +
    +
    • +
  • +
    +
    + 1 +
    +
    +
    +
    + + The issue here isn't WebKit; it's that there's no way to know that ancestor tags are significant. Consider the (extreme) case where the entire document is wrapped in a <b> tag -- the selection would be entirely contained within that <b> tag, so you'd have to traverse all the way up the document in order to apply correct formatting. The selection APIs only look back to the lowest common ancestor. One potential solution would be to traverse up the tree to apply "significant" tags. See modified example: jsfiddle.net/x5uj1zet + +– Ryan Kennedy + Oct 31 '18 at 12:13 +
    +
    +
    • + +
+
+ + +
+
+
+ +
+
+
+
+ + +
+
+
+
+ +
8
+ + + +
+ +
+ + + + +
+ +
+ + + +
+ +
+

Similar code with the same issues as the other implementation

+ +

http://snipplr.com/view/10912/get-html-of-selection/

+ +

http://jsfiddle.net/hwzqP/

+ +
getSelectionHTML = function () {
+  var userSelection;
+  if (window.getSelection) {
+    // W3C Ranges
+    userSelection = window.getSelection ();
+    // Get the range:
+    if (userSelection.getRangeAt)
+      var range = userSelection.getRangeAt (0);
+    else {
+      var range = document.createRange ();
+      range.setStart (userSelection.anchorNode, userSelection.anchorOffset);
+      range.setEnd (userSelection.focusNode, userSelection.focusOffset);
+    }
+    // And the HTML:
+    var clonedSelection = range.cloneContents ();
+    var div = document.createElement ('div');
+    div.appendChild (clonedSelection);
+    return div.innerHTML;
+  } else if (document.selection) {
+    // Explorer selection, return the HTML
+    userSelection = document.selection.createRange ();
+    return userSelection.htmlText;
+  } else {
+    return '';
+  }
+};
+
+
+
+
+ +
+ + +
+ + | + improve this answer + | + + | +
+ +
+ + +
+ + +
+
+
+ +
+ + + + +
+
+
    + +
  • +
    +
    +
    +
    +
    +
    + + it throws err Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index. if nothing selected, you should check on the rangeCount. + +– greatghoul + Jul 19 '18 at 18:10 +
    +
    +
    • + +
+
+ + +
+
+
+ + + +
+
+
+
+ +
2
+ + + +
+ +
+ + + + +
+ +
+ + + +
+ +
+

I haven't read the source of this extension/bookmarklet, but I've tried it and it seems to work. You might find your answer in here:

+ +

http://blog.webkitchen.cz/view-selection-source-chrome-extension

+
+
+
+ +
+ + +
+ + | + improve this answer + | + + | +
+ +
+ + +
+ + +
+
+
+ +
+ + + + +
+
+
    + +
  • +
    +
    +
    +
    +
    +
    + + If you don't mind getting a popup with the source this would probably be the best method in terms of reliability + +– Stofke + Feb 22 '11 at 21:32 +
    +
    +
    • + +
+
+ + +
+
+
+ + + + + + + +

+ Your Answer +

+ + + + + + +
+ + +
+
+
+
+
+ +
+
+
+
+
+ + + + + +
+ + +
+ + +
+
+ +
+ + +
+ +
+ + +
+ + + + +
+ +
+ + +

+ By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy +

+
+
+ + + + +

+Not the answer you're looking for? Browse other questions tagged or ask your own question.

+
+