從用戶選擇的文本返回 HTML

Question

我有以下非常簡單的 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 不會從警報消息中刪除？

編輯：我正在專門尋找如何從window.getSelection()獲取完整的 HTML。 警報對話框正是我嘗試驗證代碼的方式。 我只關心在 Safari 中的這個工作。

Answer 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());

Answer 2

使用 Rangy： https : //github.com/timdown/rangy

跨瀏覽器范圍和選擇庫。

在此處查看演示： http : //rangy.googlecode.com/svn/trunk/demos/index.html

Answer 3

警報框不顯示 HTML，只顯示純文本。 您無法讓 HTML 顯示在警告框中。

您可以做的是使用一些 JS 警報框替換而不是alert ，例如jQuery Dialog 、jQuery 插件或其他完全不同的東西。

從用戶選擇的文本返回 HTML

問題描述

3 個解決方案

解決方案1
67 已采納 2011-01-10 23:45:34

解決方案2
10 2011-01-10 23:47:17

解決方案3
2 2011-01-10 23:32:52

從用戶選擇的文本返回 HTML

問題描述

3 個解決方案

解決方案1 67 已采納 2011-01-10 23:45:34

解決方案2 10 2011-01-10 23:47:17

解決方案3 2 2011-01-10 23:32:52

解決方案1
67 已采納 2011-01-10 23:45:34

解決方案2
10 2011-01-10 23:47:17

解決方案3
2 2011-01-10 23:32:52