从用户选择的文本返回 HTML

IT技术 javascript safari webkit textselection
2021-01-23 08:17:45

我有以下非常简单的 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(). 警报对话框正是我尝试验证代码的方式。我只关心在 Safari 中的这个工作。

3个回答

这是一个函数，可以让您获得与所有主要浏览器中的当前选择相对应的 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());
@Jedidja：实际问题是什么？IE 10 表现得更像其他浏览器肯定是件好事吗？
2021-03-16 08:17:45
@Jehanzeb.Malik：在既不支持window.getSelection也不支持的浏览器中document.selection。诚然，我不知道现在还有任何这样的浏览器，但我更喜欢测试。
2021-03-22 08:17:45
@TimDown 实际上，你知道吗，我想我在错误的问题中发表了我的评论。当您尝试从文本区域（输入）中获取选择，而不是从页面中获取纯 HTML 时，我所描述的问题就存在了。我从你那里找到了很多关于这个主题的答案，我相信我最终把它张贴在了错误的地方。
2021-03-22 08:17:45
这在 IE10 中似乎不太好用。它确实支持 window.getSelection，但如果您处于 IE10 + 标准模式，则 document.selection 保存实际数据。
2021-04-04 08:17:45
+1 为答案。但我没有得到一件事。在什么情况下else if(typeof document.selection != "undefined")条件为真？
2021-04-06 08:17:45

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

跨浏览器范围和选择库。

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

@DanDascalescu 你能不要劫持帖子吗？谢谢 - 社区
2021-04-02 08:17:45
@DanDascalescu - 另外，我不确定编辑其他人的答案以插入您自己的评论是否合适：stackoverflow.com/posts/7478724/revisions，即使您觉得它有问题。你把自己的话放到别人的嘴里，这就是评论应该用来做的。你的这些编辑在整个网站上都被标记了。
2021-04-02 08:17:45
尽管我很想为我自己的图书馆提出建议，但我拒绝接受，理由是 Rangy 可能仅对这个功能来说就太过分了。
2021-04-04 08:17:45
@DanDascalescu - 应该使用编辑来改进格式、修复链接等，但需要尊重原始答案的精神和措辞。评论是讨论答案的潜在陷阱的地方，由回答者决定是否应将这些评论纳入答案。不应编辑答案以插入您自己或不是回答者的其他人的评论。您或他们认为正确的或改进的可能并不总是一个。
2021-04-07 08:17:45
@DanDascalescu 这个。修复链接对我来说很好，但是将您的意见添加到不属于您的答案是劫持帖子。Tbh 我已经看到你的一些编辑看起来像是劫持帖子。例如（但不限于）我看到了一颗流星，你在其中添加一个横幅指向另一个答案的答案。我相信你的意图是好的，但是像这样的imo 编辑或不是真的需要。我们为此提供了赞成/反对按钮。谢谢你的配合！
2021-04-11 08:17:45

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

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

@Box9，@Tim Down：我们在这里进行 OT，但我仍然无法让它工作。也从 Chrome 9 控制台尝试过。
2021-03-18 08:17:45
适用于 Mac 上的 FF 和 Chrome。不过，我不会在位置栏中尝试它，而是使用控制台。
2021-03-25 08:17:45
...这对我有用。只要您转义相关的引号，包含 HTML 的警报字符串就没有问题。
2021-03-26 08:17:45
@Box9：对我不起作用。FF 3.6，Windows 7。在地址栏中粘贴：javascript:alert("<b>Hi</b>");
2021-04-03 08:17:45
不对。alert("<b>Hi</b>")将工作。问题是window.getSelection().toString()剥离所有标签。
2021-04-11 08:17:45
其它你可能感兴趣的问题
上一篇来自资产的 Android WebView JavaScript 下一篇取决于所选文本的动态扩展上下文菜单