Javascript contentEditable中的颜色编码？

我一直在尝试分析WYSIWYG编辑器的工作原理，但在理解它时遇到了问题（甚至不需要5%的通用性）

我自己的问题很简单

在contentEditable div中，我有一堆文本。我想对任何与简单模式匹配的文本进行颜色编码。因此，我可能会有以下文字：

“这是一个文本，我们[可以忽略]前面的文本，但是任何符合该文本的[ref=xxxxxx | aaa | bnbb]都必须进行颜色编码。”

我想要任何遵循

[ref=]

模式的内容都稍微小一点/涂上颜色

---

有什么办法吗？

一种方法是使用出色的插件并为语法编写自定义画笔，这应该不会太难，因为您的语法着色要求非常简单。

一种方法是使用出色的插件并为语法编写自定义画笔，这应该不会太难，因为您的语法着色要求非常简单。

如果您向contenteditable添加一个keyup事件侦听器，您可以在那里执行正则表达式替换，在contenteditable的innerHTML中添加$1

这样做将重置插入符号位置，但您可以使用

函数高亮显示（）{
var selection=rangy.saveSelection（）；
contenteditable.innerHTML=contenteditable.innerHTML.replace（/（\[ref=[^\]]*\]）（[^如果向contenteditable添加keyup事件侦听器，则可以在那里执行正则表达式替换以在contenteditable的innerHTML中添加$1

这样做将重置插入符号位置，但您可以使用

函数高亮显示（）{
var selection=rangy.saveSelection（）；
contenteditable.innerHTML=contenteditable.innerHTML.replace（/（\[ref=[^\]]*\]））([^问题不在于正则表达式，而在于如何将其着色。将正则表达式捕获组匹配项替换为$1不能在活动编辑时执行此操作，只能在之后执行。问题不在于正则表达式，而在于如何将其着色。将正则表达式捕获组匹配项替换为$1不能在活动编辑时执行此操作，只能在之后执行。
function highlight(){
  var selection = rangy.saveSelection();
  contenteditable.innerHTML = contenteditable.innerHTML.replace(/(\[ref=[^\]]*\])([^<])/g, '<span class="ref">$1</span>$2');
  rangy.restoreSelection(selection);
}