从用户选择的文本返回HTML

Question

从用户选择的文本返回HTML

Cru*_*inh 18 javascript safari webkit textselection

我有以下非常简单的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>

Run Code Online (Sandbox Code Playgroud)

当我选择整个第一行并将鼠标悬停在方格上时,我会收到"这是文本"的警报.

我如何解决此问题,以便不会从警报消息中删除span标记或任何其他选定的HTML？

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

Answer 1

Tim*_*own 62

这是一个函数,它将为您提供与所有主流浏览器中当前选择相对应的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());

Run Code Online (Sandbox Code Playgroud)

答案为+1.但我没有得到一件事.在什么情况下`else if(documentof document.selection!="undefined")`条件将是真的？ (3认同)
@ Jehanzeb.Malik:在既不支持`window.getSelection`也不支持`document.selection`的浏览器中.不可否认,我不知道现在还有这样的浏览器,但我更喜欢测试. (2认同)

Answer 2

Chr*_*rey 10

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

跨浏览器范围和选择库.

在这里查看演示:http://rangy.googlecode.com/svn/trunk/demos/index.html

尽管我很想为我自己的图书馆推荐一个推荐,但我还是坚持认为Rangy对于这一个功能可能有点过分. (6认同)
@DanDascalescu请你不要劫持帖子？谢谢 - 社区 (5认同)
@DanDascalescu - 另外,我不确定编辑其他人的答案来插入你自己的评论是合适的:http://stackoverflow.com/posts/7478724/revisions,即使你觉得它有问题.你把自己的话放在别人的口中,这就是应该用什么评论.您的这些编辑在整个网站上都会被标记. (5认同)
@DanDascalescu这一个.修复链接对我来说很好,但是将你的意见添加到不属于你的答案中就是劫持帖子.Tbh我看到了一些看起来像劫持帖子的编辑.例如(但不限于)我看到了一个流星,你正在为指向另一个答案的答案添加横幅.我确信你的意图是好的,但是像[这些](http://stackoverflow.com/revisions/11755233/2)或者不是真的需要编辑.我们有upvote/downvote按钮.谢谢你的合作! (3认同)
@DanDascalescu - 编辑应该用于改进格式,修复链接等,但原始答案的精神和措辞需要得到尊重.评论是讨论潜在陷阱和答案的地方,由答案者决定是否应将这些评论纳入答案.不应编辑答案以插入您自己的评论或其他不是回答者的评论.你或他们认为正确或改进的东西可能并不总是一个. (2认同)
@BradLarson 我只想回应丹的想法。您是否真的希望每个用户通读每个答案的每条评论，寻找最终回答实际问题的更正？我来 SO 寻求解决方案，而不是寻宝游戏。当您减少准确信息并阻止像丹这样的行为时，您会降低网站的有效性。他在这个网站上为我提供的帮助比任何版主都多。如果他没有更好的事情要做，我会说他应该接受你的一份工作。继续，缓和这个:) (2认同)

归档时间：	14 年，11 月前
查看次数：	12283 次
最近记录：	10 年，6 月前