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库等。这是我能给你的最好的。

制作一个格式化文本的实时编辑器。颜色

1 个答案: