如何阻止跨度扩大到满足？

Question

我正在编写一个Math-Editor，它允许我编写像π或Δ这样的特殊符号。 这是通过在一个可信的容器中编写$pi或$delta来完成的，这样我的Javascript就可以替换并输入相应的数学字符。 为了突出显示这些符号，我将它们包装在span元素中以用于样式目的。 例如：π是红色，因为跨度样式是这样说的。其他一切都是白色的。

这是我的问题： 在我的红色π之后写文本时，此文本也会变为红色。我想这是因为我在π-span中写入并偶然扩展元素。

你怎么能阻止这种行为？我希望文本返回默认的字体颜色。有没有办法使跨度“不可扩展”，以便在 span元素后放置？

let editor = document.getElementById("editor");

document.onkeyup = function(e) {
  if (editor.innerText.indexOf("$pi") !== -1) //Fix for IE String.includes
    editor.innerHTML = editor.innerHTML.replace("$pi", "<span class='red'>π</span>");
}

.red {
  color: red;
}

<div id="editor" contenteditable="true">
  Sample Text
</div>