contentEditable div replace url links

JavaScript
1

I have a contentEditable DIV where I would like to replace any user typed URL (by matching the string with regular expression) with blue color text wrapped inside a span tag.

However, different browsers return different results. Besides, replacing the matched text with span puts cursor at the beginning of the text.
Here is the link: http://jsfiddle.net/Qz5ww/1


**CSS**

    .class{
        position:relative;
        outline:none;
        border:5px solid #96C;
        font-size:16px;
        width:500px;
        height:60px;
        padding:0px 2px;
        word-wrap:break-word;
    }

**HTML**

    <div class='class' id='div' contentEditable='true'></div>

**JavaScript**

    var regExUrl = /https?:\\/\\/([\\w\\d-\\.]+)?[\\w\\d-\\.]+\\.{1}[\\w]{1,4}(\\/{1})?([a-zA-Z0-9&-@_\\+.*&#8203;~#?\\/=]*)?/gi;

    var div = document.getElementById('div');

    div.onkeyup = function () {
        if (div.innerHTML.match(regExUrl)) {
            st = div.innerHTML.match(regExUrl);
            div.innerHTML = div.innerHTML.replace(regExUrl, "<span style='color:blue;text-decoration:underline'>" + st[0] + "</span>");

        }
    }

How can I set the cursor at the end of the replaced text and continue typing with the default color (black)?