Get Selected HTML in browser via Javascript

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.

Answers:

Answer

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 '';
      }
    };
Answer

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

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.