事業部編輯和更多...更多

Question

好，

我需要更換的話，在一個div contentEdible財產，由同一個字，但格式...
像這樣：
<div> My balls are big </div>

向該（替換的單詞：球）：
<div> My <font style="color:blue;">balls</font> are big </div>

在CONTENTEDITABLE發生這種情況dinamically，當用戶鍵入替換髮生的文本。我認爲onkeydown，onkeyup或onkey的簡單事件可以解決這個問題。 但是，這個問題是隨着插入符號的，畢竟，我嘗試了，它留在這個詞替換之前，什麼時候應該留下。我嘗試寫一些js代碼，嘗試找到一些jQuery腳本，但他們都在這種情況下失敗...

任何人都有一些ideia，或欺騙？我想： - >記錄無格式單詞的長度。 - >刪除該單詞 - >將新單詞格式化。 - >與脫字符一起走，根據這個格式化的字長來定位。 - >是嗎？ PS：我必須考慮這個div的任何地方的一個詞。

我不知道如何寫這個代碼，做我上面說的。

糾正我，如果我錯了。

既然如此，謝謝！

編輯[1]：我希望這可以適用於Mozilla Firefox，具體而言;

Answer 1

我在這臺機器上只有IE6/7，但也許你可以將這個概念應用到其他瀏覽器版本的Ranges（或者這可能是跨瀏覽器？）。

基本上我們存儲的光標位置，讓我們的搜索/替換，然後把光標回到了它是：

HTML：

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

和腳本：

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(); 
    } 
}