js range 相关(二)

接上一篇

通过range对象获得用户选择内容

var userSelection;
if (window.getSelection) { //现代浏览器
    userSelection = window.getSelection();
} else if (document.selection) { //IE浏览器 考虑到Opera，应该放在后面
    userSelection = document.selection.createRange();
}

由于兼容性的问题，IE浏览器吃IE的包子，其他浏览器吃Mozilla的馒头。

在Mozilla、Safari、Opera下上面的userSelection是个Selection对象，而在IE下则是Text Range对象。这种差异会影响到你后面的脚本：Internet Explorer的Text Ranges完全不同于Mozilla的Selection或是W3C的Range对象，你需要分别为IE和其他浏览器写两套不同的脚本。

需要注意脚本书写的顺序：Mozilla Selection需放在前面。原因在于Opera支持两种对象，如果你使用window.getSelection()去读取用户选择的内容，Opera会创建一个Selection对象；而使用document.selection则会创建一个Text Range对象。

因为Opera支持Mozilla Selection和W3C Range非常好，但是其对Microsoft Text Range的支持却差强人意。所以显然优先考虑标准浏览器，即使用window.getSelection()。

userSelection的内容

userSelection变量现在的内容要么是Mozilla Selection要么就是Microsoft Text Range对象。因此它允许访问定义在对象上的全部方法和属性。

Mozilla Selection对象包含用户选择的文本内容，如下操作：

alert(userSelection)

虽然格式并不是字符串，但是在现代浏览器下还是会弹出类似下面的内容：

泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。负责调查切尔诺贝

为了从Microsoft Text Range 对象上获得同样的信息，你需要使用userSelection.text。为了读取旋转的文字，可以使用类似下面代码：

var selectedText = userSelection;
if (userSelection.text) {
    selectedText = userSelection.text;
}

现在selectedText就包含了用户所选中的文字了。

例：

<p>4月13日消息，据台湾媒体报道，32岁的孙燕姿(Sng Ee Tze)和后天将满34岁的荷兰籍印度尼西亚男友纳迪姆(Nadim Van Der Ros)交往5年，曾说过"有空就结婚"的她，果然趁
着宣传期尾声，于3月31日在新加坡登记注册了！昨消息传开，她未否认，仅说会选择适当时间公布喜讯，所属"美妙音乐"则表示她个性低调，婚礼只会邀请双方亲友，也不会透露细节，
但据新加坡可靠消息指出，婚宴订在5月初。</p>
<button id="button">选中一些文字，然后点击本按钮</button>

JS代码：

var oBtn = document.getElementById("button");
oBtn.onclick = function() {
    var userSelection, text;
    if (window.getSelection) { 
        //现代浏览器
        userSelection = window.getSelection();
    } else if (document.selection) { 
        //IE浏览器 考虑到Opera，应该放在后面
        userSelection = document.selection.createRange();
    }
    if (!(text = userSelection.text)) {
        text = userSelection;
    }
    alert(text);
};

目前收集的range的用法先熟悉上面几点，更多内容可以查看原文http://www.cnblogs.com/solove/archive/2011/11/01/2231309.html 感谢该作者的分享