Div being edited does not fire KeyUp / Highliting Delete event

i using an editable div,

<div class="editableDiv"  contenteditable="true">
   sdtgssdrsdrtyy ╚asasasarrstssdertrtyrtyrrty ☻aaaaaaaaaaaaaaaaadaafsdsf4n
</div>

      

        
        
        
      

    

I have a task to show nonascii characters to the user, so that hilight nonascii characters I used hilighting jquery library, which extracts nonascii characters by adding a span with the "hilight" class. innerHTML looks like this:

<span class="highlight">╚</span>asasasarrstssdertrtyrtyrrty
<span class="highlight">☻</span>aaaaaaaaaaaaaadaafsdsf4n

      

        
        
        
      

    

The highlighting works well, but there is only a problem: when the user removes the nonascii characters and starts typing from that position, the characters being typed also become hightighted, when I checked the innerHTML, it shows that the characters just typed also fell into the gap as it should ...

<span class="highlight">☻aaa</span>aaaaaaaaaaaaaadaafsdsf4n

      

        
        
        
      

    

To solve this, I used the KeyUp event on the div being edited, in which case I split the range with nonascii and new typed characters and put them in a new span tag and copy the old one. This works well for the first key and the newly entered characters are also not highlighted, but after that, when I type text, this event does not fire.

I have no clue what is causing this? Is this because I explicitly changed the innerHTML div? Please, help.....

Following is the keyup function ....

$(document).on('keyup', ".editableDiv", function () {

        var hilighterSpans = $(this).children(".highlight");

        hilighterSpans.each(function (x, y) {

            var spanText = $(y).text().trim();

            if (spanText == "") {
                $(y).remove();
            }
            else {

                var regex = new RegExp("[^\u0020-\u007E]+");
                var nonasciiChar = regex.exec(spanText);

                if (nonasciiChar != "") {

                    var asciiChars = spanText.replace(nonasciiChar, '');

                    var spannode1 = document.createElement('span');

                    var spannode2 = document.createElement('span');
                    spannode2.className = 'highlight';
                    spannode2.innerHTML=nonasciiChar;

                    if (spanText.indexOf(nonasciiChar) == 0) {
                        $(spannode1).append(spannode2);
                        $(spannode1).append(asciiChars);                        
                    }
                    else {
                        $(spannode1).append(asciiChars);
                        $(spannode1).append(spannode2);                        
                    }

                    $(this).replaceWith(spannode1);
                }
            }
        });    

    });

      

        
        
        
      

    

Replaced innerHTML as follows:

<span><span class="highlight">╚</span>assd</span>
<span><span class="highlight">☻</span>aaa</span>

      

        
        
        
      

    

Could this be a problem?

JSFiddle for this issue

I JSFiddle try to enter text to the right of the highlighted nonascii character ..... I want the new typed characters to be immeasurable .... currently for the first input it works fine (although the new typed characters have changed positions, have to search for that) ... but if typed again the code doesn't work (keyup event doesn't fire) ...