求助：如何通过JavaScript取消内部邮件编辑器中内容的加粗格式？

核心思路 #

你的现有代码只实现了用<b>标签包裹选中内容的加粗逻辑，要实现取消加粗，需要先判断选中区域是否已经被<b>或<strong>标签包裹，再执行包裹/拆包的切换操作。

完整实现代码 #

function toggleBold() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0).cloneRange();
  let isBold = false;
  let currentNode = range.commonAncestorContainer;

  // 向上遍历节点，检查选中内容是否处于加粗标签内
  while (currentNode && currentNode.nodeType === Node.ELEMENT_NODE) {
    if (currentNode.tagName === 'B' || currentNode.tagName === 'STRONG') {
      isBold = true;
      break;
    }
    currentNode = currentNode.parentNode;
  }

  if (isBold) {
    // 取消加粗：移除<b>/<strong>标签，保留内部内容
    const boldElements = getBoldElementsInRange(range);
    boldElements.forEach(el => {
      const parent = el.parentNode;
      while (el.firstChild) {
        parent.insertBefore(el.firstChild, el);
      }
      parent.removeChild(el);
    });
  } else {
    // 应用加粗：原有包裹逻辑
    const wrapper = document.createElement('b');
    range.surroundContents(wrapper);
  }

  // 恢复选中状态
  selection.removeAllRanges();
  selection.addRange(range);
}

// 辅助函数：获取选中范围内的所有加粗标签
function getBoldElementsInRange(range) {
  const elements = [];
  const walker = document.createTreeWalker(
    range.commonAncestorContainer,
    NodeFilter.SHOW_ELEMENT,
    node => node.tagName === 'B' || node.tagName === 'STRONG' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
  );

  let node;
  while ((node = walker.nextNode())) {
    if (range.intersectsNode(node)) {
      elements.push(node);
    }
  }
  return elements;
}

关键逻辑说明 #

• 状态判断：通过向上遍历选中内容的祖先节点，判断是否处于<b>/<strong>标签内，确定当前需要执行加粗还是取消加粗
• 批量处理：用TreeWalker遍历选中范围内的所有加粗标签，确保部分选中或多段加粗内容都能正确取消格式
• 节点操作：取消加粗时，将标签的子节点直接移到父节点中，再删除加粗标签，完整保留原有内容结构

内容的提问来源于stack exchange，提问作者DIONISIO JANTSCH FELIPPE