getSelection() 可以仅应用于某个元素（而不是整个文档）吗？答案

【问题标题】：Can getSelection() be applied to just a certain element (not the whole document)?getSelection() 可以仅应用于某个元素（而不是整个文档）吗？
【发布时间】：2012-08-05 23:36:37
【问题描述】：

我正在测试getSelection() 方法，我希望我的程序在某个文本段落中获取所选文本并将其显示在 div 标记中。我使用了以下代码：

var txt = document.getSelection();
document.getElementById("display").innerHTML = "The text you have selected is: " + txt + ".";

但是，我希望程序仅在段落本身中进行选择，而不是在整个文档中进行选择。我尝试使用document.getElementById("id").getSelection();，但没有成功。

我怎样才能使它getSelection() 只适用于某个元素？

【问题讨论】：

对不起大家...我只是一个初学者...我很确定这是一个非常简单的问题。
使用jquery框架！！！让生活更轻松
对不起！我还没有真正学习过jQuery。如您所见，我真的是一个初学者。
@user1551482 jQuery 对这个问题一点帮助都没有。

标签： javascript string getselection

【解决方案1】：

这是一种方法，仅在 Chromium 19 中测试（支持 textContent，对于 Internet Explorer，必须使用 innerText）：

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

var b = document.getElementsByTagName('body')[0],
    o = document.getElementById('output');

b.onmouseup = function(e){
    var selText = getSelectedText(),
        targetElem = e.target.tagName.toLowerCase();
    if (selText && targetElem == 'p') {
        o.textContent = 'You selected the text: "' + selText + '" from a ' + targetElem + ' element.';
    }
};

JS Fiddle demo.

【讨论】：

我只是想检查一下……b.onmouseup 行中的“e”参数是什么？（变量代表什么？）
那是event 参数，它包含有关操作对象、节点等的信息。值得在函数中添加console.log(e)，然后检查它以查看其中的内容。特别是在 Chrome 和其他 Webkit 浏览器中，您可以在其中展开详细信息。

【解决方案2】：

getSelection() 只能作为window 和document 的方法使用。如果您想获得一个 Range 仅代表位于特定节点内的用户选择部分，这里有一个函数可以使用我的 Rangy 库（没有该库的代码会更长，超出我的热情现在写）：

function getSelectedRangeWithin(el) {
    var selectedRange = null;
    var sel = rangy.getSelection();
    var elRange = rangy.createRange();
    elRange.selectNodeContents(el);
    if (sel.rangeCount) {
        selectedRange = sel.getRangeAt(0).intersection(elRange);
    }
    elRange.detach();
    return selectedRange;
}

【讨论】：

这对我有用，但在显示时显示多个选择，如何显示单个选择？

【解决方案3】：

function getSelected() {
    if(window.getSelection) { return window.getSelection(); }
        else if(document.getSelection) { return document.getSelection(); }
                    else {
                            var selection = document.selection && document.selection.createRange();
                            if(selection.text) { return selection.text; }
                return false;
            }
            return false;
        }

用咖啡脚本编写：

getSelected = ->
  if window.getSelection
    return window.getSelection()
  else if document.getSelection
    return document.getSelection()
  else
    selection = document.selection and document.selection.createRange()
    return selection.text  if selection.text
    return false
  false

美味的javascript

【讨论】：