contenteditable选中内容使用formatblock设置H1作用于全部文本如何解决

document.execCommand 提供的 formatblock 命令默认作用于选区所在的完整块级元素，因此选中文本的部分内容时会将整个块都转为H1格式，不符合需求。我们可以通过原生Selection、Range API手动操作DOM实现仅包裹选中内容为H1的效果。

完整代码 #

HTML

<button onclick="applyH1ToSelection()">应用H1格式</button>
<div id="ce" contenteditable></div>

CSS

#ce {
  height: 100px;
  border: solid 1px black;
  padding: 10px;
}

JavaScript

function applyH1ToSelection() {
  const selection = window.getSelection();
  // 无有效选区直接返回
  if (selection.rangeCount === 0 || selection.getRangeAt(0).collapsed) return;

  const range = selection.getRangeAt(0);
  // 提取选中的DOM片段
  const selectedFragment = range.extractContents();
  // 创建H1元素包裹选中内容
  const h1Tag = document.createElement('h1');
  h1Tag.appendChild(selectedFragment);
  // 插入回原选区位置
  range.insertNode(h1Tag);

  // 重置选区避免选中残留
  selection.removeAllRanges();
}

注意事项 #

• 该方案不依赖已废弃的document.execCommandAPI，兼容所有主流现代浏览器
• 支持跨块选中内容的包裹场景，仅对选中的部分内容生效
• 无需额外依赖，直接在原有contenteditable结构上即可使用

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