Как изменить цвет определенной буквы при вводе?

Question

[Dimazsever]

Есть div с атрибутом contenteditable="true". При вводе текста в него должна осуществляться проверка каждого символа. Допустим, если в тексте встретилась буква "м", она должна выделиться красным цветом. Читал, чтобы изменить цвет одной буквы, нужно добавить её в тег span. Но, как это сделать?
Написал пример с выводом последнего введенного символа . Вместо алерта будет проверка условия. Как выделить заранее определенный символ каким-либо цветом, если он встретился при вводе?

Comments

[Dimazsever]

о боже! Опять ссылка пропала. Вот она https://jsfiddle.net/869m8zdu/

Answer 1

[Алексей Николаев]

Если условие выполнено, оберните последнюю букву (для которой выполнено условие) строки в div'е в span, далее - дело за css.

Comments

[Dimazsever]

я об этом писал. Но я не знаю как его добавить в span)

Answer 2

[Dmitriy Mozgovoy]

ИМХО тут будет проблема не в добавке тега с цветом, а в сдвиге каретки при вводе из за изменение контента. Компактного решения я не вижу. С document.getSelection походу практически та же проблема будет.

Обернуть текст в span с цветом можно любым быдлокодингом типа:

function wrapText(str, index, count, color){
               return [
                   str.substr(0,index),
                   '<span style="color:',
                   color,
                   '">',
                   str.substr(index,count),
                   '</span>',
                   str.substr(index+count)
               ].join("");
         }

        document.querySelector('div').addEventListener('input', function() {
             var s=this.innerText;
             this.innerHTML=wrapText(s, s.length-1,1,"red");
        }

Но это ничего не решает в случае с редактируемым контентом ...