JS脚本获取Div选中文字在整篇文章的起始位置(start)和结束位置(end)

原帖地址：http://www.mockte.com/rewrite.php/read-86.html

 

 

目前我开发的一个PHP系统中需要在div中截取文章被选文字的起始位置的功能。但是很遗憾，google、baidu了很多资料都非常不理想，于是自己深入研究了一下Selection对象，做了个针对IE的版本，相信能帮助需要这类功能的朋友，主要代码如下：

function getSel()
{
    var element = document.getElementById('thediv');
    if( document.selection ){
        var range = document.selection.createRange();
        var stored_range = range.duplicate();
        stored_range.moveToElementText( element );
        stored_range.setEndPoint( 'EndToEnd', range );
        element.selectionStart = stored_range.text.length - range.text.length;
        element.selectionEnd = element.selectionStart + range.text.length;
     }

     alert(element.selectionStart+";"+element.selectionEnd);
}

查看 DEMO 页面

说明：打开Demo页面后，用鼠标选中一段文字或单词，此时会弹出被选中文字在整篇文章中的起始位置。

Annotation Tool 项目Video演示 download  (rar 439kb)  

2009-04-04补充：

关于定位问题，我再补充一下，其实上面的方法不够好，我再提供一个更加简便易行的方法：

// 在得到selection and range的情况下：
var startRangeOffset = range.startOffset;
range.collapse(true);
range.setStart(range.startContainer, startRangeOffset-1);
range.setEnd(range.startContainer, startRangeOffset-1+plenght);

由于firefox的定位或者说是用js根据得到的start和end位置来设置选区，这个功能在 textarea中ff实现起来相当容易，但在div等同类容器中进行设置选区就显得有些困难，至少现在google等一些搜索引擎中也没能找到比较好的 解决方法，所以我研究了DOM 2的一些函数，得出以上方法可以设置选区，使用js在firefox中设置选取文字的起始位置和结束位置。有点啰嗦，sorry，我解释一 下，firefox的dom tree是很正规的，所以如果你使用前面的方法得到起始位置来代替 startRangeOffset 变量，会存在这样的问题，当你在一个容器中存在多个node对象的时候，这个时候你使用前面的方法得到起始位置来代替startRangeOffset 变 量就是出现一些问题，因为firefox每跳过一个node对象就开始重新计算起始位置。我不能够解释得很清楚，希望大家通过尝试来增强自己的理解，在我 的TcEditor项目中我使用了以上方法设定选区或者定位，所谓定位，就是setStart和setEnd设置相同的index即可。OK,Good Luck!!

关于setStart和setEnd函数，大家参考，以上示例代码取自我的一个内部开源项目，不可直接使用，理解之后就知道该怎么使用，Thanks，好好学习一下：

https://developer.mozilla.org/en/DOM/range