テキストと色をフォーマットするライブエディタを作成する

Question

角括弧で囲まれたすべてのテキストをコードとして強調表示できるライブテキストエディタを作成します。 [example]

<div>からテキストを引き出し、[text]のようにコード要素を置き換えるにはどうすればよいですか？

例： <code>[word]</code>と[word]を交換してください。

これは私が編集ウィンドウに関してに持っているものです。

<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ライブラリなどについて言及していません。君は。