Получить выбранный HTML в браузере через Javascript

У меня есть требование для моего веб-приложения, чтобы разрешить пользователю "Печатать только выбранные". Другими словами, пользователь выбирает текст и, возможно, изображения, а затем щелкает эту опцию. Я видел примеры получения выделенного текста с помощью Javascript, но не нашел решения для получения самого выделенного HTML.

Например, если у меня есть такой документ:

<html>
<head>
</head>
<body>
    <p>A bunch of text</p>
    <img src="someimage.jpg" />
    <p>Even more text</p>
</body>
</html>

Если пользователь выделит изображение и второй абзац, я бы хотел, чтобы JavaScript возвращал:

<img src="someimage.jpg" />
<p>Even more text</p>

Возможно ли это и как можно это сделать?

Edit: я закончил с библиотекой JS под названием Rangy для этого.

Ответы

Ответ 1

Вот какой-то код, который я нашел где-то, но я потерял реальную ссылку, и это, похоже, работает.

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

Есть некоторые проблемы с кодом (я тестировал с сафари), где он не возвращает точный выбор.

enter image description hereenter image description hereenter image description here

Ответ 2

Аналогичный код с теми же проблемами, что и другая реализация

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