Jquery/Javascript - Syntax highlighting as user types in contentEditable region

For that question: http://stackoverflow.com/questions/13107150/jquery-javascript-syntax-highlighting-as-user-types-in-contenteditable-region

by Ömür Yanıkoğlu

HTML

<script src="http://dl.dropboxusercontent.com/u/14243582/jscalc/js/rangy-core.js"></script>
<script src="http://dl.dropboxusercontent.com/u/14243582/jscalc/js/rangy-selectionsaverestore.js"></script>
<div class="editable" contentEditable="true">
    User types here...
</div>

CSS

.editable {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px;
    min-height: 100px;
    color: #999;
}
    .editable.typed {
        color: #333;
    }

        .editable.typed .username {
            color: gray;
        }
            
            .editable.typed .username.exist {
                color: blue;
            }

JavaScript

// Thanks: http://stackoverflow.com/questions/5595956/replace-innerhtml-in-contenteditable-div/5596688#5596688

// make an array of users for demo
var users = ["hayatbiralem", "evchan", "denislexic", "Noseratio"];

// helper functions
var helper = {
    
    // check exist
    isExist: function(user){
        // delete @ sign and last &nbsp;
        user =  user.substring(1).replace("&nbsp;","");

        // search and return result
        return users.indexOf(user) != -1;
    },
    
    // highlight: regex replacer function
    highlight: function (match, user, offset, string){
        
        console.log('valid', user);
        
        var exist = helper.isExist(user);
        if(exist) console.log('exist', user);
        
        return '<span class="username' + (exist ? ' exist' : '') + '">' + user + '</span>';
    },
    
    // keyIsAvailable
    keyIsAvailable: function(e){
        return e.keyCode == 32 || (e.keyCode > 47 && e.keyCode < 91 && !e.ctrlKey && !e.shiftKey && !e.altKey);
    },
    
    // keyIsDelete
    keyIsDelete: function(e){
        return e.keyCode == 8 || e.keyCode == 46;
    },
    
    // saveSelection
    saveSelection: function(containerEl) {
        var charIndex = 0, start = 0, end = 0, foundStart = false, stop = {};
        var sel = rangy.getSelection(), range;
    
        function traverseTextNodes(node, range) {
            if (node.nodeType == 3) {
                if (!foundStart && node == range.startContainer) {
                    start = charIndex + range.startOffset;
                    foundStart = true;
                }
                if (foundStart && node == range.endContainer) {
                    end = charIndex + range.endOffset;
                    throw stop;
                }
                charIndex += node.length;
            } else {
                for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                    traverseTextNodes(node.childNodes[i], range);
                }
     ...