contentEditable删除mark标签后重输生成冗余标签如何解决

这是浏览器contenteditable组件的默认富文本样式继承逻辑导致的：删除<mark>标签内的全部内容后，光标仍保留了原标签的高亮样式上下文，新输入内容时浏览器会自动生成带对应内联样式的<span>/<font>标签，而非复用原语义化<mark>标签。

方案1：实现新输入内容自动包裹原<mark>标签 #

思路是监听删除操作，在<mark>内容被删空时主动插入空的<mark>标签并将光标移入，后续输入内容会直接落在<mark>内部：

const editable = document.getElementById('editable');
let deletedMarkContext = null;

editable.addEventListener('keydown', (e) => {
  // 仅监听删除操作
  if (e.key !== 'Backspace') return;
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  // 判断光标所在父元素是否为即将被删空的mark标签
  const parentMark = range.commonAncestorContainer.parentElement.closest('mark');
  if (parentMark && parentMark.textContent.trim().length === 1) {
    // 记录mark标签的位置上下文
    deletedMarkContext = {
      parent: parentMark.parentNode,
      nextSibling: parentMark.nextSibling
    };
    // 内容删空后插入空mark标签并聚焦
    setTimeout(() => {
      const emptyMark = document.createElement('mark');
      deletedMarkContext.parent.insertBefore(emptyMark, deletedMarkContext.nextSibling);
      const newRange = document.createRange();
      newRange.selectNodeContents(emptyMark);
      newRange.collapse(true);
      selection.removeAllRanges();
      selection.addRange(newRange);
      deletedMarkContext = null;
    }, 0);
  }
});

方案2：新输入内容不生成任何额外嵌套标签，仅保留纯文本 #

有两种实现方式可选：

方式A：属性配置（兼容性好，实现简单） #

直接给contenteditable设置plaintext-only值，即可让可编辑区域仅接受纯文本输入，不会自动生成任何<span>/<font>类嵌套标签，原有已存在的<mark>标签样式不受影响：

<div id="editable" contentEditable="plaintext-only">
  Here is some <mark>text</mark> for testing!
</div>

目前Chrome、Edge、Safari、Firefox 90+版本均支持该属性。

方式B：DOM主动清理 #

如果需要兼容旧版浏览器，可以监听输入事件，主动把生成的带样式标签替换为纯文本：

const editable = document.getElementById('editable');
editable.addEventListener('input', () => {
  // 替换所有自动生成的带样式标签为纯文本
  editable.querySelectorAll('span[style], font').forEach(node => {
    const textNode = document.createTextNode(node.textContent);
    node.parentNode.replaceChild(textNode, node);
  });
  // 恢复光标到末尾
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(editable);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);
});

内容的提问来源于stack exchange，提问作者thopaw