我正在尝试替换 contenteditable div 中的 span 标签

问题描述

在我的替换功能中，我想在 html 中添加一个 span 标签，但实际上是像字符串一样插入... 最终意图是更改此元素的颜色或样式。

"use strict";
document.designMode = "on";

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

let observer = new MutationObserver(mutations =>
mutations.forEach(mutation => {
    console.log(text.textContent);
    observer.disconnect();// turn observer off;
    text.textContent = text.textContent.replace('e','<span>e</span>');
   
    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);
    observe(); // turn back on 
})
);
  
  const observe = ()=> {
  
    observer.observe(text,{
      childList: true,characterData: true,subtree: true,});
  };
  observe();

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

<p contenteditable="true" id="text">I'm a text will be change</p>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）