Javascript HTML/JS不断替换内容可编辑div中的字符串_Javascript_Html_Css

Javascript HTML/JS不断替换内容可编辑div中的字符串

javascript html css

Javascript HTML/JS不断替换内容可编辑div中的字符串,javascript,html,css,Javascript,Html,Css,我想要一个contenteditable div调用一个函数，该函数不断地检查其内容并替换其中的模式（想想Markdown）。我的尝试导致光标不断地将自己定位到div的开头，文本以向后的顺序插入。此外，即使（正则表达式样式替换）模式匹配，带有HTML标记（如粗体）的替换也不会终止，剩下的div将以粗体显示。下面是复制这些问题的简单代码示例： //JS// var content=document.getElementById（“内容”）；函数重新格式化（） { content.innerH

我想要一个contenteditable div调用一个函数，该函数不断地检查其内容并替换其中的模式（想想Markdown）。我的尝试导致光标不断地将自己定位到div的开头，文本以向后的顺序插入。此外，即使（正则表达式样式替换）模式匹配，带有HTML标记（如粗体）的替换也不会终止，剩下的div将以粗体显示。下面是复制这些问题的简单代码示例：


//JS//
var content=document.getElementById（“内容”）；
函数重新格式化（）
{
content.innerHTML=content.innerHTML.replace（/dogs/g，“cat”）；
}

基本上，我希望它用粗体的“cat”替换“dogs”，并且在用户输入时没有任何异常。我的最后一个办法是将不可编辑的div转换为可编辑的div，以避免出现问题，但这涉及到为看似微不足道的事情重新设计轮子。我应该如何处理这个问题

我曾访问过其他帖子，如，但光标仍然被卡住，如果可能的话，我希望我的答案是香草JS。如果除了HTML/JS/CSS（Visual Studio、Python tkinter等）之外，还有其他更适合的平台，请告诉我。

试试这个，我没有找到更好的解决方案。我用setinterval替换事件，所以我不需要分发到内容，第二个我检查是否匹配，如果匹配，我替换匹配字符串，并通过lastchild将插入符号返回到字符串的末尾


var content=document.getElementById（“内容”）；
函数重新格式化（）
{
var dogs=/dogs/g；
var content1=content.innerHTML+“”；
找到的变量=内容1.匹配（狗）；
如果（找到）{
content.innerHTML=content1.replace（/dogs/g，“cat”）；
var range=document.createRange（）
var sel=window.getSelection（）
range.setStart（content.lastChild，0）
范围。折叠（真）
选择removeAllRanges（）
选择添加范围（范围）
} 
}
#内容{
边框：1px纯黑；
}

试试这个，它到处都是，但我没有找到更好的解决方案。我用setinterval替换事件，所以我不需要分发到内容，第二个我检查是否匹配，如果匹配，我替换匹配字符串，并通过lastchild将插入符号返回到字符串的末尾


var content=document.getElementById（“内容”）；
函数重新格式化（）
{
var dogs=/dogs/g；
var content1=content.innerHTML+“”；
找到的变量=内容1.匹配（狗）；
如果（找到）{
content.innerHTML=content1.replace（/dogs/g，“cat”）；
var range=document.createRange（）
var sel=window.getSelection（）
range.setStart（content.lastChild，0）
范围。折叠（真）
选择removeAllRanges（）
选择添加范围（范围）
} 
}
#内容{
边框：1px纯黑；
}

这里可能已经给出了答案：根本原因是一个可编辑元素在内部内容发生变化时重置光标位置的行为。@Gulielmus很有趣，但它使用了textarea。此外，将“=b=”中的“b”退格仍然会留下一个“==”而不是转换为“+”。这里可能已经有答案了：根本原因是当内部内容发生变化时，可编辑元素重置光标位置的行为。@Gulielmus很有趣，但它使用了textarea。此外，在“=b=”中对“b”进行退格仍然会留下“==”而不是转换为“+”。我发现了一些边缘情况，例如“dogs dogs”将插入符号重置到某个位置，标记在其之后继续。我编辑了我的答案。因此，使用新代码我等待空间。我发现了一些边缘情况，例如“dogs dogs”将插入符号重置到某个位置，标记在其之后继续。我编辑了我的答案。因此，使用新代码我等待空间。。

<body>
    <div id = "content" contenteditable = "true" oninput = "reformat()"></div>
</body>

// JS //

var content = document.getElementById("content");
function reformat()
{
    content.innerHTML = content.innerHTML.replace(/dogs/g, "<b>cat</b>");
}