Get Selected HTML in browser via Javascript

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


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 hereenter image description hereenter image description here


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

Tags:

Javascript

Recent Posts