急求可编辑DIV光标定位问题

Question

首选感谢进来帮助我的大侠们！谢谢！
给的分也许不多，我也会经常帮助大家的。我做过WEB几年，手游及网游也弄过大半年。
我的目的是想做一个HTML代码着色的功能。我现在想在DIV内onkeyup后，将里面的内容进行一次更换，例如：
var a=div.innerHTML;
div.innerHTML = a.replace(/<br>/ig, "<br />");
这样进行赋值后，光标就会失去，我想这样操作后将光标还原到，按键松开时的那个位置。查阅无数资料，终无法解决，希望有经验的大侠们帮帮我了。现在存在的问题：
1. 如果光标停留到行末，则会自动跳到下一行的首部
2. 在没有滚动条的情况下，我定位都正确了，可一但出现滚动条就不知道怎么办了。。源码如下：
var oSel = document.selection.createRange();
var pos = {x:oSel.offsetLeft, y:oSel.offsetTop};// 颜色分析，并进行着色
divHtml.innerText = this.parseColor(divHtml.innerText);
divHtml.innerHTML = this.enforceColor(divHtml.innerHTML);var rng = event.srcElement.document.selection.createRange();
rng.moveToPoint(pos.x-1, pos.y);
rng.select();

Answer 1

div 有光标吗？是div 里面的表单元素的光标吗？
this.parseColor、this.enforceColor 是什么东西？
“1. 如果光标停留到行末，则会自动跳到下一行的首部” 末行怎么还有下一行？

Answer 2

<div id="div1">
<br>
    <textarea id="ta"  onclick="getActiveElement()">
      abc
      <br>
    </textarea>
</div>
<button onclick="setDiv(false);" >无焦点</button>
<button onclick="setDiv(true);" >有焦点</button>
<span id="sp"></span><script type="text/javascript">
function $(id){ return document.getElementById(id)}
var active; 
var activeId;function getActiveElement(){
active=document.activeElement;
activeId=document.activeElement.id;
showFocus();
}
function showFocus(){
if (document.activeElement){
$('sp').innerText='focus id is: ' + document.activeElement.id;
}
}
function setDiv(bFocus){
var div = $('div1');
var newTag = div.innerHTML.replace(/\<br\>/ig, "");
div.innerHTML = newTag;

if (bFocus ){
// div 的 innerHTML 被被赋值后，里面的对象要重新获取
// 估计是被赋值后，内部已经不是原先的对象了。
var newActive =$(activeId); 
alert(newActive) //一定要alert 后才能获取焦点，不清楚原因
newActive.focus();

}
else{
active.focus();
}
showFocus();}

Answer 3

    if (bFocus ){
        // div 的 innerHTML 被被赋值后，里面的对象要重新获取
        // 估计是被赋值后，内部已经不是原先的对象了。
        var newActive =$(activeId); 
        document.getElementById("newActive ")style.display = "none";
          document.getElementById("newActive ")style.display = "block";
        newActive.focus();
        
    }
这样试试看可以不

Answer 4

多谢各位，我上面的方法就是有滚动条就不对了，我不知道如何处理
停留在行末，我把offsetLeft-1就实现了，原理我不知道，我只知道这样可以

Answer 5

属性contenteditable=true的DIV就有光标了

Answer 6

我现在又有了一些认识，改了一种方法利用moveStart
这种方法解决了滚动条的问题，但是出现了一个新问题：就是光标由方向箭移动到行首时会自动的前移到上一行的行末希望大家能帮帮分析下如何解决，我也在积极尝试。
再次谢谢各位。以下是测试代码，已经通过剩下的就是解决如何能将光标停在行首var oSel = document.selection.createRange();
oSel.moveStart("character", parseInt(divHtml.innerText.length) * -1);
var p = oSel.text.length;// 颜色分析，并进行着色
divHtml.innerText = this.parseColor(divHtml.innerText);
divHtml.innerHTML = this.enforceColor(divHtml.innerHTML);var rng = event.srcElement.document.selection.createRange();
var rows = getRows(divHtml.innerText.substr(p)); // 获得光标之前的行数（即换行符数量）
var tar = (parseInt(divHtml.innerText.length) - p) * -1 + rows;
rng.moveStart("character", tar);
rng.moveEnd("character", tar);
rng.select();