Подсветка отдельных символов
 

Доброе время суток.
нужна помощь в следующем вопросе.
Мне нужно сделать, что-бы при вводе текста, определенные символы окрашивались в определенные цвета (например латинские символы в синий цвет).
Попытался реализовать через:
но, к сожалению,
требует предварительно вручную выделить символ, что мне не подходит, поскольку символы должны окрашиваться "на лету" при вводе.

Подскажите, может есть другие способы реализовать данную задумку.
Буду очень благодарен за подсказку.

Находи нужный символ и оборачивай его в <span style="bla bla">..</span>
Если объем текста небольшой - тормозов возникнуть не должно.

Проблема в том, что тогда теряется позиция курсора в тексте (в случае, если пользователь вводит символ в средине текста).

Значит нужно перед заменой запоминать позицию курсора и восстанавливать после замены. Твиттер же как-то решил эту проблему )

Как запоминать позицию курсора я в инете нашел, а вот как восстанавливать после замены - ничего не нашел.
Все рабочие примеры, что мне попадались только для <input> или <textarea>

к сожалению решение твитера мне пока не по зубах. я в javascrip еще новичок. Жаль, что они это в свой бутстрап не добавили. было бы проще

Добавлять в бутстрап хрень, которая нужна одному из миллиона?

Изначально, перед вставкой, вставляете за текущей позицией курсора тег <a id="thispostion"></a>, после замены, - ищите позицию тега, а тег -удаляете

Вот что у меня в результате получилось:

document.getElementById('inp_symbols').onkeypress = function (e) {
            var e = e || window.event,
                target = e.target || e.srcElement;
                isIE = document.all;
                code = isIE ? e.keyCode : e.which,
                data = {};

            if (target.nodeName != 'INPUT' && target.nodeName != 'TEXTAREA') {
                if (code == 27) {
                    // restore state
                    document.execCommand('undo');
                    target.blur();
                    return true;
                } else{
                    if (code == 13) {
                        // save
                        data[target.getAttribute('data-name')] = target.innerHTML;
                        target.blur();
                        e.preventDefault();
                        return true;
                    }
                }

                if (code<32 || e.ctrlKey || e.altKey) return true;

                var color = 'red-color',
                    sym = String.fromCharCode(code);
                if(sym.search(/[a-zA-Z]/) !== -1){
                    color = 'blue_symbol';
                }else{
                    if(sym.search(/[0-9]/) !== -1){
                        color = 'gray_symbol';
                    }
                }

                //вставка элемента в текущую точку ввода
                if (isIE) {//IE
                    var rng = document.selection.createRange();
                    rng.pasteHTML('<span class="'+color+'">'+sym+'</span>');
                }else{//other
                    document.execCommand('insertHTML', false, '<span class="'+color+'">'+sym+'</span>');
                }

                return false;
            }
        };

где document.getElementById('inp_symbols') это

<p id="inp_symbols" contenteditable="true" data-name="title" spellcheck="false"></p>

ну и CSS:

<style type="text/css">
.blue_symbol{
        color:blue;
    }
    .gray_symbol{
        color:gray;
    }
    .red-color{
        color:red;
    }
</style>