Word克隆开发：加粗按钮重复嵌套<span>，如何修改现有<span>样式

你的核心问题在于用全局变量isBold判断状态，且每次点击都强制创建新标签，导致重复嵌套。要实现切换样式而非嵌套，需要动态判断选中文本的当前粗体状态，并直接修改对应节点的样式，而非重复包裹。

修改后的代码 #

JavaScript

function applyText(type) {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);
  let targetSpan = null;

  // 检查选中内容是否在已有的加粗span中
  if (selection.anchorNode) {
    targetSpan = selection.anchorNode.parentElement.closest('span[style*="font-weight:bold"]');
  }

  if (type === 'bold') {
    if (targetSpan) {
      // 已加粗，切换为正常样式
      targetSpan.style.fontWeight = 'normal';
      // 如果样式为空，可移除span标签（可选优化）
      if (!targetSpan.style.cssText) {
        const parent = targetSpan.parentNode;
        while (targetSpan.firstChild) {
          parent.insertBefore(targetSpan.firstChild, targetSpan);
        }
        parent.removeChild(targetSpan);
      }
    } else {
      // 未加粗，创建新span包裹选中内容
      const span = document.createElement('span');
      span.style.fontWeight = 'bold';
      span.appendChild(range.cloneContents());
      range.deleteContents();
      range.insertNode(span);
    }
  }

  // 恢复选中状态（提升用户体验）
  const newRange = document.createRange();
  newRange.selectNodeContents(targetSpan || span);
  selection.removeAllRanges();
  selection.addRange(newRange);
}

HTML

<div id="editor-area" contenteditable="true" placeholder="Type your text here..."></div>
<button onclick="applyText('bold')"><i class="fa-solid fa-bold"></i> Bold</button>

关键改进点 #

• 移除全局状态变量：不再依赖isBold全局变量，而是通过closest()动态查找当前选中内容的父级加粗span，判断实际样式状态
• 直接修改现有节点：如果已存在加粗span，直接修改其fontWeight为normal，甚至可以在样式为空时移除span标签，避免冗余标签
• 恢复选中状态：操作后重新选中内容，让用户清晰感知样式变化的范围

补充说明 #

如果需要处理跨多个节点的选中内容（比如选中一段包含多个标签的文本），可以进一步遍历选中范围内的所有节点，逐个处理是否需要添加/移除粗体样式。

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