Div éditable et Plus ... Plus

Question

Eh bien,

je dois remplacer un mot, dans une div propriété contentEdible sur, par le même mot, mais formaté ...
Comme ceci:
<div> My balls are big </div>

Pour cela (remplacer le mot: boules):
<div> My <font style="color:blue;">balls</font> are big </div>

Dans un contentEditable cela se produit dinamically, alors que l'utilisateur tapez le texte des remplacements se produit. Je pense qu'un simple événement onkeydown, onkeyup, ou onkey press, peut résoudre cette partie. Mais, le problème est avec le caret, après tout ce que j'ai essayé, il reste avant le mot remplacé, quand devrait être rester après. J'ai essayé d'écrire du code js, j'ai essayé de trouver des scripts jquery, mais tous ont échoué dans cette situation ...

Quelqu'un a un peu d'ideia, ou un truc? Je pense: -> Enregistrer la longueur du mot non formaté. -> Supprimer ce mot -> Mettre le nouveau mot formaté. -> Marcher avec le curseur, pour positionner cette longueur de mot formatée. -> Est-ce? PS: Je dois considérer un mot dans n'importe quel endroit de cette div.

Je ne sais pas comment écrire ce code qui fait ce que je dis ci-dessus. Corrigez-moi si je me trompe.

Depuis, merci! Je veux que cela fonctionne sur Mozilla Firefox, specificlly;

Answer 1

J'ai seulement IE6/7 sur cette machine, mais peut-être pouvez-vous appliquer le concept à d'autres versions de Ranges (ou peut-être cross-browser?).

Fondamentalement, nous hébergerons la position du curseur, faire notre recherche/remplacement, puis placez le curseur où il était:

html:

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

et le script:

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 = '<font style="color:blue">'; 
var replaceEnd = '</font>'; 
// 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(); 
    } 
}