目前我开发的一个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
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