如何在多个 HTML 元素上获取选择的文本？答案

【问题标题】：How to get the text of a selection over multiple HTML elements?如何在多个 HTML 元素上获取选择的文本？
【发布时间】：2011-09-22 05:57:37
【问题描述】：

这是我的问题：

当用户在文章或所见即所得编辑器小部件的编辑区域中进行选择时，选择可以跨越多个元素，像锚点、图像、跨度标签……甚至是块级元素（但我的问题中没有表格）。

我知道如何从选择中检索 Range 对象，但找不到可靠的解决方案来获取Range 对象的内容文本。

我不是在寻找 IE 的解决方案（它的 TextRange 对象有一个.text 属性）。

谢谢！

【问题讨论】：

标签： javascript html selection

【解决方案1】：

这会返回一个字符串，适用于所有主流浏览器：

function getSelectionText() {
    var text = ""
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type == "Text") {
        text = document.selection.createRange().text;
    }
    return text;
}

【讨论】：

+1，感谢您的代码的可靠性和检查document.selection.type == "Text"的想法

【解决方案2】：

你看过quirksmode关于 Range 的文章吗？

根据这篇文章，您可以创建这样的方法：

function getRangeText() {

    var userSelection;
    if (window.getSelection) {
        userSelection = window.getSelection();
    } else if (document.selection) {
        userSelection = document.selection.createRange();
    }
    var selectedText = userSelection;
    if (userSelection.text) {
        selectedText = userSelection.text;
    }
    return selectedText;
}

我在 FF5、Opera 11、Mac 上的 Safari 以及 IE6 和 IE7 中对此进行了测试。它值得在其他 IE 浏览器中进行测试，但我猜它也适用于它们。

【讨论】：

感谢您的回答和所有的测试！我不知道 Selection 对象可能存在隐式字符串转换 (userText = userSelection + "")
我讨厌这篇古怪的文章：代码有错误，而且到处都是。问题是这个函数在 IE Selection 对象，如果你依赖于获取一个字符串，这是不好的。请参阅我的答案以获得更简单的工作功能。很抱歉你的回答大吵大闹，@Chris：这不是私人的，也不是你的错。
@Tim Down 是的，我注意到可以返回一个 Selection 对象；但是'var selectedText = userSelection;'这行让我想到自动字符串转换可能很有用；我一直认为它只会返回 [object Selection] 之类的东西。