如何强制取消execCommand编辑文本的加粗与下划线（非切换且禁用removeFormat）

要绕过removeFormat的问题，直接操作选区DOM元素是最可靠的方式，下面是具体实现：

核心处理函数 #

这个函数会遍历选区内的格式标签，强制移除加粗（<b>/<strong>）和下划线（<u>），同时处理CSS内联样式的情况：

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

  const range = selection.getRangeAt(0);
  // 处理所有加粗和下划线标签
  const formatTags = Array.from(range.commonAncestorContainer.querySelectorAll('b, strong, u'));
  
  formatTags.forEach(tag => {
    const parent = tag.parentNode;
    // 将标签内的内容移到父节点，替换标签本身
    while (tag.firstChild) {
      parent.insertBefore(tag.firstChild, tag);
    }
    parent.removeChild(tag);
  });

  // 处理用CSS内联样式设置的加粗/下划线
  const styledElements = Array.from(range.commonAncestorContainer.querySelectorAll('[style*="font-weight:bold"], [style*="text-decoration:underline"]'));
  styledElements.forEach(el => {
    el.style.removeProperty('font-weight');
    el.style.removeProperty('text-decoration');
    // 清除空的style属性
    if (!el.style.length) el.removeAttribute('style');
  });
}

集成到你的快捷键逻辑 #

把函数调用加到现有的快捷键处理代码里即可：

window.addEventListener('keydown', function (event) {
  if (event.altKey){
    if (event.code === 'Digit1') {
      // 取消高亮、调整字号
      document.execCommand("hiliteColor", false, "transparent");      
      changeFont('7.5pt');
      // 强制取消加粗和下划线
      removeBoldAndUnderline();
    }
  }
});

补充说明 #

• 不管是用标签还是内联样式设置的格式，这个方法都能强制清除，不会像execCommand的toggle方法那样只切换状态
• 如果选区只选中了格式标签内的部分文本，函数依然能正确处理对应范围内的格式
• 这个逻辑不会影响其他未选中的文本，只会作用于当前选区

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