var startP = [the p node];
var endLi = [the second li node];
range.setStart(startP, 8);
range.setEnd(endLi, 5);
读取起止选中内容
上面提到了setStart(startContainer, startOffset)以及setEnd(endContainer, endOffset)。考虑到实际情况，你很难准确知道用户选择的文字的起始位置，所以，上面一板一眼赋予偏移值的方法显然有很大的局限性。好在任何（看参见上面的兼容性表格）Range对象有4个属性是用来定义选择内容起止点的，这4个属性与Selection对象相似，但是却是不同的名称：anchorNode/anchorOffset定义选择的起始，focusNode/focusOffset定义结束。
因此，上面的脚本创建选区可以使用如下代码实现：
range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
Safari的多虑
现在已经是2011年了，释小龙都有绯闻了，Safari 5已经出来好些日子了。所以，如果仅仅是为了兼顾低版本的Safari而去使用程序创建Range，我觉得是一点必要都没有。尤其在我们这个神奇的国度上，首先使用Safari就少，低版本的就少之又少，Safari老早就已经支持getRangeAt()了，Chrome浏览器也是如此。
您可以狠狠地点击这里：Safari下getRangeAt测试demo
选择demo页面中的任意一部分文字，然后点击测试按钮，在较新版本的Safari浏览器下就会出现类似下图的结果：
所以，在当前环境下，要想将Selection对象转换成Range对象，直接如下代码就OK了(完整版)：
复制代码 代码如下:
var userSelection, rangeObject;
if (window.getSelection) {
//现代浏览器
userSelection = window.getSelection();
} else if (document.selection) {
//IE浏览器 考虑到Opera，应该放在后面
userSelection = document.selection.createRange();
}
//Range对象
rangeObject = userSelection;
if (userSelection.getRangeAt) {
//现代浏览器
rangeObject = userSelection.getRangeAt(0);
}
七、rangy – JavaScript Range&Selection库
项目地址：
就在几天前，rangy更新到了版本1.1，作者还新更新了四五个示意的页面，展示了相关的API，方法和属性等。虽然如此，由于实例较少，还是让人很难知道此JavaScript库如何使用。这里就举几个简单的例子示意下。//zxx:此插件非压缩达115K，个人觉得有些庞大，在实际项目中的应用价值不大
示例1，获取用户选中的文字：
您可以狠狠地点击这里：rangy获取用户选中文字demo
选中部分文字点击按钮，会有如下弹出（截自Firefox3.6）：
相关JavaScript代码如下：
复制代码 代码如下:
var sel = rangy.getSelection();
alert(sel.toString());
示例2，给选中文字添加背景
您可以狠狠地点击这里：文字选中添加背景图demo
选中页面上一段文字，然后失去焦点，就会看到文字后面有了个美女背景图，如下截图，截自IE7浏览器：
完整JavaScript代码如下：
复制代码 代码如下:
<script type="text/javascript" src="https://www.zhangxinxu.com/study/201104/rangy/rangy-core.js"></script>
<script type="text/javascript" src="https://www.zhangxinxu.com/study/201104/rangy/rangy-cssclassapplier.js"></script>
<script>
var cssApplier;
window.onload = function() {
rangy.init();
cssApplier = rangy.createCssClassApplier("selectClass", true);
document.body.onmouseup = function() {
cssApplier.toggleSelection();
};
};
</script>
如果您看到下面的文字，可能是由于在其他网站或是RSS中阅读本文，本文原地址：?p=1591，本文作者：张鑫旭，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。
八、实际的应用
微博之插入话题
差不多去年这个时候，自己折腾过JS 文本域光标处添加文字并选中的内容，也是拿的新浪微博示例的，文章是“新浪微博插入话题后部分文字选中的js实现”，但是去年这篇文章多实现的话题插入效果是比较弱的：
1. 选中普通文字不能作为话题插入
2. 话题只能插在文本域最后二不是光标处
3. 默认文字的话题可以重复插入
所以，趁这个机会，正好把微博之插入话题这个功能完善下。
您可以狠狠地点击这里：微博插入话题的效果实现demo
欢迎输入内容，点击测试。大致会有类似下面的效果(截自Chrome)：
