Get Selected HTML in browser via Javascript

by

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

More Related Contents:

  1. x y plane coordinates – find is how many points in the list above are located a distance less than or equal to the radius [closed]
  2. How do I make the first letter of a string uppercase in JavaScript?
  3. jQuery’s jquery-1.10.2.min.map is triggering a 404 (Not Found)
  4. How to fix getImageData() error The canvas has been tainted by cross-origin data?
  5. How to serialize DOM node to JSON even if there are circular references?
  6. Where can I make API call with hooks in react?
  7. Why do people put code like “throw 1; ” and “for(;;);” in front of json responses? [duplicate]
  8. Why are certain function calls termed “illegal invocations” in JavaScript?
  9. How do I get around window.opener cross-domain security
  10. Combine the values of two arrays into object
  11. Adding div element to body or document in JavaScript
  12. Call js-function using JQuery timer
  13. “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error for response from http://www.google.com/
  14. React hooks: accessing up-to-date state from within a callback
  15. regex to get the number from the end of a string
  16. How to check if an array contains another array?
  17. With form validation: why onsubmit=”return functionname()” instead of onsubmit=”functionname()”?
  18. Count instances of string in an array
  19. Uncaught TypeError: lang is not a function [duplicate]
  20. Javascript document.cookie always returns empty string
  21. Discord.js v13 code breaks when upgrading to v14
  22. What is Angular 4 and from where I can learn more about it?
  23. How to resize then crop an image with canvas
  24. Should JSON include null values [closed]
  25. Parsing JSON containing new line characters [duplicate]
  26. Dynamically changing less variables
  27. how to auto select an input field and the text in it on page load
  28. Generating sound on the fly with javascript/html5
  29. Can I do SendKeys in Javascript?
  30. Javascript float subtract

Leave a Comment