Возврат HTML из выбранного пользователем текста
У меня есть следующая, очень простая страница 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.
Ответы
Ответ 1
Здесь функция, которая получит 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());
Ответ 2
Использовать Rangy: https://github.com/timdown/rangy
Библиотека кросс-браузера и библиотека выбора.
Посмотрите демо здесь: http://rangy.googlecode.com/svn/trunk/demos/index.html
Ответ 3
Оповещения не отображают HTML, просто текст. Вы не можете заставить HTML отображаться в окне предупреждения.
Что вы можете сделать, это использовать замену ящика предупреждения JS вместо alert
, например jQuery Dialog, плагин jQuery или что-то еще еще полностью.