在用户键入时更新contentEditable字段中的文本

Question

我正在尝试使用具有<div>属性的contentEditable构建所见即所得的降价编辑器。

keyup事件每次触发时，我都将str.replace与正则表达式结合使用以查找降价语法的实例。例如，在字符串“ this text is **bold**”中，我使用HTML使文本实时显示为粗体。

但是，每次按键并更新“伪字段”时，插入符号/光标都将返回到起点。我尝试了各种策略来重新定位它，包括selectionStart和selectionEnd，但似乎这些属性不适用于<div>（它们是未定义的）。

var editor = document.getElementById('editor');

editor.addEventListener('keyup', function (e) {
    var doc = editor.innerHTML;
    editor.innerHTML = doc.replace(/\*\*(\S(.*?\S)?)\*\*/gm, '<strong>$1</strong>');
});

（正则表达式的贷记为this answer。]

注意：我知道StackOverflow上已经发布了类似的问题，但是大多数问题是在8到10年前问到的，并使用jQuery。我想知道在过去十年中是否出现了使用香草JS的更现代，更直接的方法。

Answer 1

这不是在键入事件时更改当前元素的innerHTML的好习惯。

在文本区域中键入，然后替换其他元素的innerHTML

运行代码片段并编写文本以查看出了什么问题：

var editor = document.getElementById('editor');

editor.addEventListener('keyup', function (e) {
var doc = editor.innerHTML;
if(!doc.match(/\*\*/)) return;
editor.innerHTML = doc.match(/\*\*(.*?)+\*\*/g).map((v)=>{return v.replace("**","<strong>").replace("**","</strong>");}).join("");
});

<div id="editor" contenteditable>edit</div>

解决方案：

非常复杂，但是请仔细阅读长行以了解：

var editor = document.getElementById('editor');

editor.addEventListener('keyup', function (e) {
var doc = editor.value;
document.querySelector("div").innerHTML = doc.split(" ").map((v)=>{return v.match(/\*\*(.*?)\*\*/)?v.match(/\*\*(\S(.*?\S)?)\*\*/gm).map((v)=>{console.log(document.querySelector("div").innerHTML);return v.replace("**","<strong>").replace("**","</strong>");}).join(""): v;}).join(" ");
});

<textarea id="editor">edit</textarea>
<div></div>