HTML+Javascript(jQuery)+CSSで作るリッチテキストエディタについて

現在、jQueryを使用してリッチテキストエディタを作成しています。
リッチテキストエディタの内容としては、ある正規表現にマッチした文字列を自動的に<span>で囲うというものです。その際に、<div contenteditable="true"></div>という要素でマッチした文字列を<span>で囲っているのですが、<span>で囲った後に文字列を入力すると、キャレットの位置がおかしくなってしまいます。
どうすれば、キャレットの位置を元の位置に戻せるのでしょうか？

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<title></title>
6	<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
7	<script type="text/javascript" src="e.js"></script>
8	<style type="text/css">
9	a{
10		color:red;
11	}
12	</style>
13</head>
14<body>
15	<textarea id="textView"></textarea>
16	<div contenteditable="true" id="ritchTextView" style="background-color: rgb(200,200,200); height: 200px;"></div>
17</body>
18</html>

javascript
1var richTextFocus = false;
2var PrevText = "";
3var Timer = null;
4$(function(){
5	$("#ritchTextView").focus(function(event) {
6		richTextFocus = true;
7		Timer = setInterval(function(){ritchTextEdit()},10);
8	}).blur(function(event) {
9		richTextFocus = false;
10		clearInterval(Timer);
11	});
12
13	function ritchTextEdit(){
14		if(richTextFocus){
15			var NewText = $("#ritchTextView").text();
16
17			if(PrevText != NewText){
18				PrevText = NewText;
19
20				var range = document.createRange();
21				var NowSelect = window.getSelection();
22				var eRange = NowSelect.getRangeAt(0);
23
24				$("#textView").val(NewText);
25
26				var OutoutHtml = NewText.replace(/\n/g, "<br>\n").replace(/aa(.*?)aa/gm, function(){
27					return "<a>*"+RegExp.$1+"</a>";
28				});
29
30				if(OutoutHtml != NewText) $("#ritchTextView").html(OutoutHtml);
31				console.log(eRange.startContainer);
32				range.setStart(eRange.startContainer, eRange.startOffset);
33				range.setEnd(eRange.endContainer, eRange.endOffset);
34
35				NowSelect.removeAllRanges();
36				NowSelect.addRange(range);
37
38
39			}
40		}
41	}
42
43});