Определить номер символа по клику
 

В общем есть div с текстом, контент дива редактировать нельзя, но при клике на див нужно определить позицию курсора(тоже див элемент), с определением строки проблем нет, а вот с определением отступа слева есть проблема: у каждого символа своя длина и как определить перед каким символом при клике нужно поставить курсор я себе плохо представляю.
Я пытаюсь написать свой редактор для кода и всё ради этого.

/*
 interger n - номер активной строки
 float x - координата Х мыши при клике
 fr.linesText содержит тексты всех строк
 $("#redactor_symbol") - span элемент
*/
var getColumn = function(n, x){
    var text = fr.linesText[n].replace(/<\/?[^>]+>/g, '').replace(/\&lt;/g, '<'),
              //регуляркой убираем хтмл теги и заменяем &lt; на нормальный символ
		prev = 0,
		next = 0;
	
	for(var i = 0, len = text.length+1; i < len;i++){
		if(text.charAt(i) == ' '){
		  next += 4;
		  continue;
		}
		
		if(i != 0)
	    prev = next - $("#redactor_symbol").html(text.charAt(i-1)).width();
		next += $("#redactor_symbol").html(text.charAt(i)).width() + 0.2;
		
		if(x >= prev && x <= next){
		  break;
		}
	}
	
	var big = next - x, lit = x - prev;
	
    if((big < lit) || (big == lit)){
	  return {left: next, num: i};
	}	
	else{
	  return {left: prev, num: i};
	}
}

Но скрипт работает через раз, а в строках с большими буквами вообще не работает

С этим всё сложно и мерзко, лучше не лезть в такое и юзать готовые решения с тысячей уже выстраданных другими костылей.)

Для firefox это выглядит так:

<script>window.addEventListener('click',function(e){
    if(document.body.lastElementChild === e.target) return;
    document.body.lastElementChild.innerHTML = 
        '<br>parentNode: ' + e.rangeParent.parentNode.tagName + 
        '<br>nodeText: ' + e.rangeParent.data +
        '<br>textOffset: ' + e.rangeOffset;
},false)
</script>
<div>"Я пытаюсь написать свой редактор для кода и всё ради этого."</div>
<div>"Но скрипт работает <b>через раз</b>, а в строках с большими буквами вообще не работает"</div>
<div style="color:#600"></div>

Aetae, а для остальных браузеров?

Chiz, для остальных - читайте первое предложение в моём ответе. Лезть в это дерьмецо с головой я ни за что больше не буду.) Привёл пример ff только потому, что он боле менее человеческий и я его запомнил. С остальным если такое желание есть - мучайтесь сами. А лучше последуйте таки моему совету.)