已补全 IE6,IE7,IE8下使用Javascript记录光标选中范围 _云知道

刚和同事讨论了一个很有趣的问题，有个idea，需要记录用户在页面选中的内容，在ff和ie9下有w3c的dom2级事件createRange，这里不再累赘。主要问题是在IE6,7,8只能通过createTextRange选中热区。假如我们知道用户选择开始元素和偏移量，以及结束元素以及偏移量，那么我们可以用下面的例子把用户选择的内容用js给标记起来
复制代码代码如下:
head
script
function mark() {
var b= document.getElementById ("b");
var b1= document.getElementById ("b1");
var b2= document.getElementById ("b2");
var a1 = document.body.createTextRange();
a1.moveToElementText(b);
a1.moveStart(’character’,17);
var a2 = document.body.createTextRange();
a2.moveToElementText(b1);
a2.moveEnd(’character’,-2);
a1.setEndPoint ("EndToEnd",a2);
a1.select();
}/script
/head
body
div id="b"The bcontents/b of the isource/i element./div
div id="b1"The bcontents/b of the isource/i element./div
div id="b2"The bcontents/b of the isource/i element./div
button onclick="mark();"Mark/button
/body

ok，从上面的代码，我们可以知道，在IE6,7,8下，需要关联多个元素的选择时候，我们需要创建两个textRange，一个是开始节点，以及偏移量，还有一个结束节点，以及偏移量，两个textRange用a1.setEndPoint关联
参考文档：http://help.dottoro.com/ljgbbkjf.php
http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx
上面是我们知道开始结束位置的情况下，那我们如何知道用户自己选中的热区的开始，结束节点和偏移量呢？
很可惜查了半天，MSDN只有以下几个属性可以利用，
textRange.parentElement返回选中热区的父亲节点，可以帮助我们确定，一个大概的范围
boundingLeft,offsetLeft，可以知道热区的左偏移距离
boundingTop,offsetTop，可以知道热区的上偏移距离
text，选中的文本内容，htmlText选中的html内容
可以没有直接的index…，和开始节点。。。之类
好吧，如果我们要通过位置来算的话，我们可以通过每行的line-height，计算高度，如果是一个节点的话，要计算节点的height,padding,marging，
如果是计算左偏移的话，要计算font-size，margin,padding,letter-space，这样我们通过css的计算，可以得到大致的位置，
然后我们结合text，和htmlText去比对附近的元素的文本内容，可以得到索引的坐标
这样基本上我们可以确定开始/结束节点，以及偏移量了，
不过这样做的成本也是比较高的，不知道大家还有没有好的办法，或者hacker的方法^_^
==================================================================================
刚才又看了下htmlText方法，有个惊奇的发现，还是上面的例子，htmlText返回如下
DIV id=srche Isource/I element./DIV
DIV id=src1The Bcontents/B of the Isource/I element/DIV【已补全 IE6,IE7,IE8下使用Javascript记录光标选中范围】可以看到开始节点的tagName，还有选中的内容，可以通过去掉开头结尾的html tag，然后用正则判断取到这段html代码在之前的parent.innerHTML的位置，这样偏移量也就取到了，ok，不需要通过判断offset的方式，我们就可以取到开始，结束节点，以及偏移量了
这样在IE6,7,8下，可以记录用户任意选中的内容的开始、结束节点，以及偏移量了^_^

=============================================================
只是这样做，还有一个唯一的缺点就是对于单个字符，或者重复出现的单词，还是得通过css的offsetLeft 这样的属性，通过判断距离，还确定是否是选中的那个，不知道大家有没好的建议

===============================================================
然后今天早上，今天灵光一现，互发奇想，解决不需要通过offsetTop,left判断单个node内部，重复字符的偏移量问题

已补全 IE6,IE7,IE8下使用Javascript记录光标选中范围

推荐阅读

怎么设置微信的好友验证及添加好友

拯救者大结局电视剧拯救者的大结局是什么

怎么购买超前点播

恋爱一个月男朋友送我伞带什么意思恋爱一个月男朋友送女朋友伞带代表什么

课文景阳岗的主要内容景阳冈课文内容概括

怎么清理苹果手机内存垃圾清理怎么清理苹果手机内存垃圾清理方法

苹果泥怎么保鲜

吃什么食物补充微量元素锌吃什么食物补充微量元素锌最好

鸡冠花繁殖方法鸡冠花繁殖方法

楼房的腰线是什么意思

部分正在报名中,招教报名条件

石蜡与水的密度谁大

炒苦瓜的做法，鸡蛋炒苦瓜的做法是什么？

章子怡超话，章子怡录像超有爱

新密垃圾处理怎么处理,主动做好垃圾分类

葫芦娃幸运转盘活动怎么玩合适,吃鸡葫芦娃全套汇总