首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >从用户选择的文本返回HTML

从用户选择的文本返回HTML
EN

Stack Overflow用户
提问于 2011-01-11 07:31:12
回答 3查看 13.2K关注 0票数 21

我有以下非常简单的html页面:

代码语言:javascript
复制
<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>

当我选择整个第一行并将鼠标放在正方形上时,我得到一个警告"This is the text.“。

我如何解决这个问题,使span标记或任何其他选定的HTML不会从警报消息中删除?

编辑:我正在寻找如何从window.getSelection()获取完整的。警告对话框正是我尝试验证代码的方式。我只关心在Safari中的工作。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-01-11 07:45:34

这是一个函数,它可以让你在所有主流浏览器中获得与当前选择相对应的HTML:

代码语言:javascript
复制
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());
票数 67
EN

Stack Overflow用户

发布于 2011-01-11 07:47:17

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

跨浏览器范围和选择库。

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

票数 10
EN

Stack Overflow用户

发布于 2011-01-11 07:32:52

警告框不显示HTML,只显示纯文本。您无法获取在警告框中显示的HTML。

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4652734

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档