JavaScript富文本编辑功能开发中，选区操作和格式维护是直接影响用户体验的核心模块，处理不当会导致用户输入内容格式错乱、选区跳转等常见问题，需要掌握对应的API和逻辑处理方案。
富文本编辑选区基础概念
选区指的是用户在富文本编辑区域中选中内容的范围，在浏览器中主要通过Selection和Range两个对象来管理。Selection对象代表当前用户选择的文本范围或插入符位置，Range对象则代表文档中的一个连续范围，包含起始节点、起始偏移量、结束节点、结束偏移量等属性。
获取当前选区
通过window.getSelection()方法可以获取当前页面的Selection对象，再从中提取Range对象即可拿到具体的选区信息，示例代码如下：
// 获取当前选区和范围
function getCurrentRange() {
const selection = window.getSelection();
if (selection.rangeCount === 0) {
return null;
}
return selection.getRangeAt(0);
}
设置选区
如果需要主动修改用户选区，比如格式化后恢复之前的选区，需要创建新的Range对象并添加到Selection中，示例代码如下：
// 设置选区到指定范围
function setRange(range) {
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
常见选区操作场景
保存与恢复选区
在对选中内容做格式化操作前，需要先保存当前选区，格式化完成后再恢复，避免选区丢失。保存选区时需要记录范围的起始节点、偏移量等信息，示例代码如下：
// 保存选区信息
function saveSelection() {
const range = getCurrentRange();
if (!range) return null;
return {
startContainer: range.startContainer,
startOffset: range.startOffset,
endContainer: range.endContainer,
endOffset: range.endOffset
};
}
// 恢复选区
function restoreSelection(savedRange) {
if (!savedRange) return;
const range = document.createRange();
range.setStart(savedRange.startContainer, savedRange.startOffset);
range.setEnd(savedRange.endContainer, savedRange.endOffset);
setRange(range);
}
获取选中内容
可以通过Range对象的toString()方法获取用户选中的文本内容，示例代码如下：
// 获取选中文本内容
function getSelectedText() {
const range = getCurrentRange();
if (!range) return '';
return range.toString();
}
格式维护策略
文本格式维护
文本格式包括加粗、斜体、下划线等行内样式，通常使用document.execCommand方法或者手动操作DOM实现。使用execCommand时需要注意先保存选区，执行命令后恢复，示例如下：
// 执行加粗格式化
function toggleBold() {
const savedRange = saveSelection();
document.execCommand('bold', false, null);
restoreSelection(savedRange);
}
如果需要更精细的控制，也可以手动创建<span>标签包裹选中内容，设置对应的样式属性，避免execCommand带来的兼容性问题。
块级格式维护
块级格式包括标题、段落、列表等，处理时需要注意选中的内容可能跨多个块级元素，需要遍历选中的所有节点，逐个修改其块级标签。示例如下是将选中内容转为段落的示例：
// 将选中内容转为段落
function formatToParagraph() {
const range = getCurrentRange();
if (!range) return;
// 获取选中的文档片段
const fragment = range.extractContents();
// 创建新的段落元素
const p = document.createElement('p');
p.appendChild(fragment);
// 插入新段落并删除原内容
range.insertNode(p);
// 调整选区到新段落内部
const newRange = document.createRange();
newRange.selectNodeContents(p);
setRange(newRange);
}
格式冲突处理
当用户选中已经带有格式的内容再次执行格式化操作时，需要处理格式冲突，比如已经加粗的内容再次点击加粗按钮应该取消加粗。可以通过判断选中内容的现有格式状态，决定是添加还是移除格式，示例逻辑如下：
// 判断选中内容是否已经是加粗格式
function isSelectionBold() {
const range = getCurrentRange();
if (!range) return false;
// 获取选中内容的父节点样式
const parentElement = range.commonAncestorContainer.parentElement;
return window.getComputedStyle(parentElement).fontWeight === 'bold' || parentElement.tagName === 'STRONG';
}
注意事项
- 操作选区前需要确保富文本编辑区域处于可编辑状态，即设置
contenteditable属性为true。 - 频繁操作DOM时建议先离线处理，再一次性插入文档，避免多次重绘影响性能。
- 不同浏览器对
Selection和Range的API实现略有差异，需要做兼容性测试。 - 保存选区时如果节点被修改或删除，恢复的选区会失效，需要在节点修改前完成选区保存。
JavaScript富文本编辑选区操作格式维护修改时间：2026-06-26 02:33:29