Javascript 当我用<；替换字符串时，MutationObserver创建无限循环；span>；标签

我想用一个html contenteditable div替换所有事件。我需要用一个标记替换事件，以便用css自定义它。 但当我尝试用一个span替换时，MutationObserver会生成一个无限循环

document.designMode = "on";

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

let observer = new MutationObserver(mutations =>
  mutations.forEach(mutation => {
    console.log(text.textContent);
    // let a = "a";
    // a.style.color = "red";
    text.textContent = text.textContent.replace('/', '<span>/</span>');
    observer.disconnect(); 
    const range = document.createRange();
    const textNode = text.firstChild;
    range.setStart(textNode, text.textContent.length);
    range.setEnd(textNode, text.textContent.length);
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    // observer.disconnect(); 
  })
);

observer.observe(text, {
  childList: true,
  characterData: true,
  subtree: true,
  
});

document.designMode=“on”；
var text=document.getElementById（'text'）；
让观察者=新的突变观察者（突变=>
突变。forEach（突变=>{
console.log（text.textContent）；
//设a=“a”；
//a.style.color=“红色”；
text.textContent=text.textContent.replace（“/”，“/”）；
observer.disconnect（）；
常量范围=document.createRange（）；
const textNode=text.firstChild；
range.setStart（textNode、text.textContent.length）；
range.setEnd（textNode，text.textContent.length）；
const sel=window.getSelection（）；
选择removeAllRanges（）；
选择添加范围（范围）；
//observer.disconnect（）；
})
);
观察员：观察（案文{
儿童名单：是的，
characterData:true，
子树：对，
});

我是一个文本将被更改的人

无限循环是由于在不首先关闭观察者的情况下，将键入的

/

字符替换为

/

而引起的-每次替换都会再次触发观察者

此问题的解决方案很简单：更换前关闭观察者，然后再次打开：

“严格使用”；
document.designMode=“on”；
var text=document.getElementById（'text'）；
让观察者=新的突变观察者（突变=>
突变。forEach（突变=>{
console.log（text.textContent）；
observer.disconnect（）；//关闭observer；
text.textContent=text.textContent.replace（“/”，“/”）；
常量范围=document.createRange（）；
const textNode=text.firstChild；
range.setStart（textNode、text.textContent.length）；
range.setEnd（textNode，text.textContent.length）；
const sel=window.getSelection（）；
选择removeAllRanges（）；
选择添加范围（范围）；
观察（）；//重新打开
})
);
const observe=（）=>{
观察员：观察（案文{
儿童名单：是的，
characterData:true，
子树：对，
});
};
观察（）
span{背景色：黄色；}
我是一个文本将被更改的人
<p id="text" contenteditable="true">I'm a text will be change</p>