从用户选择的文本返回 HTML

发布于 2024-10-11 11:36:38 字数 828 浏览 8 评论 0原文

我有以下非常简单的 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 中的工作情况。

原文

I have the following, very simple html page:

<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>

When I select the entire first line and mouseover the square, I get an alert with "This is the text.".

How would I fix this so the span tag or any other selected HTML isn't stripped out of the alert message?

edit: I'm looking specifically for how to get the full HTML from window.getSelection(). The alert dialog was just how I was attempting to validate the code. I'm only concerned about this working in Safari.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

少钕鈤記 2024-10-18 11:36:39

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

跨浏览器范围和选择库。

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

回复收藏 0 原文

挽心 2024-10-18 11:36:39

警报框不显示 HTML，仅显示纯文本。您无法让 HTML 显示在警报框中。

您可以做的是使用一些JS警报框替换而不是alert，例如jQuery Dialog，一个 jQuery 插件，或者完全是其他东西。

回复收藏 0 原文

羁拥 2024-10-18 11:36:38

这是一个函数，可以让你在所有主要浏览器中获取与当前选择相对应的 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());

Here's a function that will get you HTML corresponding to the current selection in all major browsers:

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

回复收藏 0 原文

~没有更多了~