Rewrite a IE Code to a FF Code

Question

This is the code (now is full):

HTML:

<div id="content" contentEditable="true" onkeyup="highlight(this)">This is some area to type.</div>

Javascript:

function highlight(elem){
    // store cursor position
    var cursorPos=document.selection.createRange().duplicate();
    var clickx = cursorPos.getBoundingClientRect().left; 
    var clicky = cursorPos.getBoundingClientRect().top; 
    // copy contents of div
    var content = elem.innerHTML;
    var replaceStart = '';
    var replaceEnd = '';
    // only replace/move cursor if any matches
    // note the spacebands - this prevents duplicates
    if(content.match(/ test /)) {
        elem.innerHTML = content.replace(/ test /g,' '+replaceStart+'test'+replaceEnd+' ');
        // reset cursor and focus
        cursorPos = document.body.createTextRange();
        cursorPos.moveToPoint(clickx, clicky);
        cursorPos.select(); 
    }   
}

Just woks on IE, unhapply. Anyone can 'adjust' this code, to work on FF too!...

Thanks

Edit[1]:
Div Editable and More... More

This code replaces a especific word by the same word formatted...
And the caret (cursor) stay always after the word replaced! <<< "This is the big"
But just works on IE, and I like so much to rewrite this code to work on FF... but I can't do it... Its so hard...

Anyone can help?

Edit[2]: My problem is just with this part:

        // reset cursor and focus
        cursorPos = document.body.createTextRange();
        cursorPos.moveToPoint(clickx, clicky);
        cursorPos.select(); 

Because, moveToPotion and select functions just works on IE... Until then it is easy... On FF there is another set of functions that make it possible... But i don't know how to write another code that do the same things. Do you got it?

Answer 1

You can preserve the caret position by inserting a marker element at its current location before doing your replacement on the element's innerHTML. (Using DOM methods to traverse the text nodes and searching each for the text you want would be preferable to using innerHTML, by the way).

The following works, so long as the caret is not positioned within or adjacent to the word "text". I also added a timer to prevent calling this function every time a key is pressed and to wait for the user to stop typing for half a second.

function insertCaretMarker() {
    var range;
    var markerId = "sel_" + new Date() + "_" + ("" + Math.random()).substr(2);
    if (window.getSelection) {
        var sel = window.getSelection();
        range = sel.getRangeAt(0);
        range.collapse(true);
        var markerEl = document.createElement("span");
        markerEl.appendChild(document.createTextNode("\u00a0"));
        markerEl.id = markerId;
        range.insertNode(markerEl);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(true);
        if (range.pasteHTML) {
            range.pasteHTML("<span id=\"" + markerId + "\">&nbsp;</span>");
        }
    }
    return markerId;
}

function restoreCaret(markerId) {
    var el = document.getElementById(markerId);
    var range;
    if (el) {
        if (window.getSelection && document.createRange) {
            var sel = window.getSelection();
            range = document.createRange();
            range.setStartBefore(el);
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(el);
            range.collapse(true);
            range.select();
        }
        el.parentNode.removeChild(el);
    }
}

function preserveCaretPosition(func) {
    var id = insertCaretMarker();
    func();
    restoreCaret(id);
}

var highlightTimer;

function highlight(elem) {
    if (highlightTimer) {
        window.clearTimeout(highlightTimer);
    }
    highlightTimer = window.setTimeout(function() {
        highlightTimer = null;
        var replaceStart = '<b>';
        var replaceEnd = '</b>';
        // only replace/move cursor if any matches
        // note the spacebands - this prevents duplicates
        if (elem.innerHTML.match(/ test /)) {
            preserveCaretPosition(function() {
                elem.innerHTML = elem.innerHTML.replace(/ test /g, ' ' + replaceStart + 'test' + replaceEnd + ' ');
            });
        }
    }, 500);
}