Как отформатировать contenteditable div при вводе?

Question

Я пытаюсь написать функцию, которая позволяет contenteditable div выполнять некоторое автоматическое форматирование, пока пользователь печатает в div.Пока мне удается заставить его работать только в IE.Кто-нибудь может мне помочь?

function formatOnKeyUp(){
    if (window.getSelection) {
        // ???????
    } else if (document.selection) {
        cursorPos=document.selection.createRange().duplicate();
        clickx = cursorPos.getBoundingClientRect().left; 
        clicky = cursorPos.getBoundingClientRect().top;
    }

    text = document.getElementById('div1').innerHTML;
    text = text.replace(/this/gm, "<i>this</i>");
    // .... some other formating here...
    document.getElementById('div1').innerHTML = text;

    if (window.getSelection) {
        // ????????
    } else if (document.selection) {
        cursorPos = document.body.createTextRange();
        cursorPos.moveToPoint(clickx, clicky);
        cursorPos.select();
    }
}

Answer 1

Вы можете использовать модуль сохранения и восстановления выбора в моей библиотеке Rangy , которая использует невидимые элементы маркера на границах выбора. Я бы также предложил сделать замену после определенного периода бездействия кейборда, а не после каждого keyup события:

function formatText(el) {
    // Save the selection
    var savedSel = rangy.saveSelection();

    // Do your formatting here
    var text = el.innerHTML.replace(/this/gm, "<i>this</i>");
    el.innerHTML = text;

    // Restore the original selection 
    rangy.restoreSelection(savedSel);
}

var keyTimer = null, keyDelay = 500;

document.getElementById('div1').onkeyup = function() {
    if (keyTimer) {
        window.clearTimeout(keyTimer);
    }
    keyTimer = window.setTimeout(function() {
        keyTimer = null;
        formatText(document.getElementById('div1'));
    }, keyDelay);
};

Answer 2

Положение курсора и диапазон текста выглядят специфически для JScript Microsoft.

Если вы заменяете текст, когда кто-то печатает, зачем вам этот код?