Javascript 制作一个实时编辑器，对文本进行格式化&；颜色

我想制作一个实时文本编辑器，允许方括号中的所有文本作为代码高亮显示<代码>[示例]

如何从编辑中提取文本并用代码元素替换所有的

[text]

例如： 将

替换为

这是关于编辑窗口的内容：

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

正如你所看到的，我正试图用一点正则表达式来做这件事

除此之外，我想不出一个方法来实现我想要的。即使这样也不行

谢谢。
为什么不直接获取div的内部html，搜索一个开括号，然后将其索引到右括号中，将这些索引添加到数组中，对每个开/闭集合执行此操作，然后从数组中读取这些索引，并突出显示那些索引范围内的字符

我会给你一个更好的答案，但我没有足够的信息，你没有提到你正在使用的堆栈、JavaScript库等。所以这是我能给你的最好答案。
你需要问一个特定的问题。这对网站来说太宽了。要回答这个问题，就需要写一篇大量的教程，这不太可能在将来对任何人都有帮助。凡事都要简单。我明白了，好吧，是的，那么我会说我上面说的是关于你唯一的选择，唯一一个不过分的选择。