项目需要对html内文章内容做颜色标记的功能，但是不能改写原html的内容。
现在想到的方案是鼠标划取文章内容的时候，使用js获取文章内容的起始位置和结束位置，存入数据库，下次再访问该文章的时候，使用数据库记录的起始位置和结束位置去刻画标记。
测试前端代码如下
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
</head>
<body>
<div id="content" style="background: grey">
乔布斯掌权时代的iPhone以精湛的做工受到广泛的关注，也受到了大量的果粉追捧。iPhone4S的黄金尺寸设计，再到iPhone5s的巅峰状态，但是iPhone6的横空出世似乎打破了苹果公司在工艺方面的追求。虽然iPhone6及其iPhone6 Plus的销量比前几代产品都要高 （原因受安卓大屏冲击的影响，果粉对大屏手机的欲望愈加的浓烈），但是收到广泛吐槽也是最多的。大白条，尤其是突出的摄像头，乔布斯知道估计都能从坟里跳出来！ 不喜欢的iPhone6的果粉可以等等了，iPhone7马上就要来临了，这是国外设计师设计出的一部iPhone7的概念图，这部iPhone7不仅做工精湛， 而且消除了打白条和涉嫌头突出问题，更重要的是采用了iPhone4的双面玻璃设计，边角做出了圆润设计，不仅时尚，而且商务气息十足， 适合追求时尚的年轻人和商务人士使用，受用人群更广泛了。
</div>
</body>
<script type="text/javascript">
$(function(){
$("#content").mouseup(function(e){
if(window.getSelection) {
var textObj = document.getElementById("content");
var selectedText = window.getSelection().toString();
alert(selectedText);
selectedText = "<span style='background:red'>"+selectedText+"</span>";
var start = window.getSelection().anchorOffset;
var end = window.getSelection().focusOffset;
var tempStr1 = textObj.innerHTML.substring(0,start);
var tempStr2 = textObj.innerHTML.substring(end);
document.getElementById("content").innerHTML = tempStr1 + selectedText + tempStr2 ;
}
});
});
</script>
</html>
第一次划取执行的时候没有问题，获取的起始位置是相对于div标签的。
执行之后会向html中添加span标签
第二次划取span标签后的文字的时候，获取的起始位置却是相对于span标签的
有没有方法每次获取的起始位置都是相对于div的？
