Возврат HTML из выбранного пользователем текста - PullRequest
Новая
       19

Возврат HTML из выбранного пользователем текста

17 голосов
/ 11 января 2011

У меня есть следующая, очень простая html-страница: 

<html>
    <head>
    <script type="text/javascript">
        function alertSelection()
        {
            var selection = window.getSelection();
            var txt = selection.toString();
            alert(txt);
        }
    </script>
    </head>
    <body>
        This is <span style="background-color:black;color:white">the</span> text.
        <div style="background-color:green;width:30px;height:30px;margin:30px"
            onmouseover="alertSelection()">
    </body>
</html>

Когда я выделяю всю первую строку и наводю указатель мыши на квадрат, я получаю предупреждение с «Это текст».

Как бы это исправить, чтобы тег span или любой другой выбранный HTML-код не удалялся из предупреждающего сообщения?

edit: Я специально ищу, как получить полный HTML-код из window.getSelection(). Диалоговое окно с предупреждением было именно тем, как я пытался проверить код. Меня беспокоит только эта работа в Safari.

Ответы [ 3 ]

61 голосов
/ 11 января 2011

Вот функция, которая даст вам HTML, соответствующий текущему выбору во всех основных браузерах: 

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

alert(getSelectionHtml());
10 голосов
/ 11 января 2011

Использование Rangy: https://github.com/timdown/rangy

Кроссбраузерный диапазон и библиотека выбора.

Ознакомьтесь с демонстрациями здесь: http://rangy.googlecode.com/svn/trunk/demos/index.html

2 голосов
/ 11 января 2011

Окна предупреждений не отображают HTML, а просто текст.Невозможно отобразить HTML-код в окне оповещения.

Что вы можете сделать, это использовать замену окна оповещения JS вместо alert, например jQuery Dialog, плагин jQuery или что-то еще полностью.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...