作出這樣的格式文本和顏色

Question

我想打一個活的文本編輯器，將允許在方括號中的所有文本應當強調的代碼編輯器直播。 [example]

如何從編輯<div>中提取文本並用代碼元素替換所有[text]？

例如： 將[word]替換爲<code>[word]</code>。

這是我的問候編輯窗口：

<div contenteditable="true" id="edit"> 
    The big <code>[color]</code> fox jumped over the lazy <code>[animal]</code>. 
</div> 

大[color]狐狸跳過了懶惰[animal]。

我做了JS的這一點，但它不會做任何事情：

EDIT = document.getElementById("edit"); 

EDIT.onkeypress = function(event) { 
    if (event.keyCode === 221) { 
     var text = EDIT.innerText; 
     EDIT.innerHTML = text.replace(/\[([\w\s]+)]/g, "<code>[$1]</code>"); 
    } 
}; 

正如你所看到的，我試圖用正則表達式的一點點做。

除此之外，我想不出辦法來完成我想要的東西。即使這樣也行不通。

謝謝。

Answer 1

爲什麼不乾脆讓div的內部HTML，搜索開放的支架，然後將其索引到右括號，這些索引添加到陣列中，請爲每個打開/關閉設定，然後看這些索引超出數組，並突出顯示落在這些索引範圍內的字符？

我願意給你一個更好的答案，但我沒有足夠的信息來走下車的，你沒有提到的堆棧你使用，JavaScript庫，等等。所以這是我能給的最好的您。