在 contenteditable=true 的元素中，清除选中文本的样式是一个常见需求，通常是为了实现富文本编辑器的“清除格式”功能。这涉及到获取选区，然后修改选区的 HTML 内容。

以下是几种实现此目标的方法，从简单到更复杂，以及它们各自的优缺点：

方法一：使用 document.execCommand('removeFormat') (不推荐，但仍需了解)

这是最简单、最直接的方法，但 不推荐在现代 Web 开发中使用。

javascript
function removeFormat() {
document.execCommand('removeFormat', false, null);
}


工作原理：
document.execCommand('removeFormat') 命令会移除当前选中文本中的所有格式（如粗体、斜体、下划线、颜色、背景色、字体大小、字体类型等）。

缺点：
* 已弃用： document.execCommand() 已经被标记为已弃用，未来可能会被移除。
* 浏览器兼容性问题： 它的行为在不同浏览器之间可能存在差异，有时效果不尽如人意。
* 可控性差： 你无法精确控制要移除的样式，它会移除所有能识别的格式。
* 安全性问题： 在某些情况下，execCommand 可能存在安全漏洞。

何时可能用到：
如果你需要兼容非常古老的浏览器，并且只需要一个简单的“清除所有格式”功能，可以考虑，但强烈建议寻找替代方案。

方法二：手动解析和重构 HTML (推荐)

这是最灵活、最推荐的方法。它涉及获取选区，然后遍历其 DOM 结构，提取纯文本内容，并重新插入到编辑器中。

javascript
function clearSelectedFormatting() {
const selection = window.getSelection();
if (!selection || selection.rangeCount === 0) {
return; // 没有选区，直接返回
}

const range = selection.getRangeAt(0);
const fragment = range.cloneContents(); // 克隆选中文本的 DOM 节点

// 移除所有格式节点，只保留纯文本
// 这是一个简化的实现，可以根据需要添加更多逻辑
let textContent = '';
const walk = document.createTreeWalker(fragment, NodeFilter.SHOW_TEXT, null, false);
let node;
while (node = walk.nextNode()) {
textContent += node.textContent;
}

// 移除选中文本
range.deleteContents();

// 创建一个文本节点并插入
const newTextNode = document.createTextNode(textContent);
range.insertNode(newTextNode);

// 将光标移动到新文本节点的末尾
range.setStartAfter(newTextNode);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}


工作原理：

1. 获取选区和范围： window.getSelection() 获取当前的选区，getRangeAt(0) 获取第一个（也是通常唯一的）范围。
2. 克隆内容： range.cloneContents() 创建一个 DocumentFragment，其中包含选中文本的 DOM 结构。
3. 提取纯文本：
* 使用 document.createTreeWalker 遍历 DocumentFragment。
* NodeFilter.SHOW_TEXT 过滤器表示我们只关注文本节点。
* walk.nextNode() 逐个获取文本节点，并将其 textContent 拼接到 textContent 变量中。
* 重要： 这个简化的文本提取方式会丢失所有 HTML 结构（如 <p>, <strong>, <em> 等）。如果需要保留一些基本结构（例如段落），则需要更复杂的遍历和重构逻辑。
4. 删除选中文本： range.deleteContents() 移除编辑器中原来选中的内容。
5. 插入纯文本： document.createTextNode(textContent) 创建一个只包含纯文本的新节点，并使用 range.insertNode(newTextNode) 将其插入到原来的位置。
6. 重置光标： 将光标定位到新插入的文本节点之后，确保用户可以继续在光标处输入。

优点：

* 高度可控： 你可以精确控制要保留或移除的 HTML 标签。
* 现代 Web 标准： 基于标准的 DOM API，兼容性更好。
* 灵活性： 可以实现更复杂的“清除格式”逻辑，例如只保留段落和换行，移除所有样式。
* 安全性： 比 execCommand 更安全。

缺点：

* 实现复杂度稍高： 相对于 execCommand，需要编写更多的代码。
* 性能考虑： 对于非常大的选区，DOM 操作可能会有性能影响。

方法三：使用第三方库 (推荐用于复杂编辑器)

如果你正在构建一个完整的富文本编辑器，强烈建议使用成熟的第三方库，它们已经解决了这些复杂性。

* QuillJS: 一个强大的、现代的富文本编辑器，提供了非常丰富的 API 来管理内容和格式。
* TinyMCE: 另一个非常流行的富文本编辑器，功能强大，社区活跃。
* CKEditor: 另一个功能齐全的富文本编辑器。

优点：

* 开箱即用： 提供了“清除格式”等预置功能。
* 成熟稳定： 经过大量测试和使用， Bug 较少。
* API 完善： 提供了丰富的 API，方便进行二次开发和定制。
* 性能优化： 通常经过优化，性能较好。

缺点：

* 引入额外依赖： 需要将库添加到项目中。
* 学习曲线： 需要花时间学习库的使用方法。

示例：一个更精细的“清除格式”函数 (基于方法二)

上面的方法二只是简单地提取了纯文本。如果你想保留一些基本的结构（例如，一个 <div> 包裹的内容，并希望移除其中的 <strong>, <em>, <span> 等），你需要修改遍历和重构的逻辑。

javascript
function clearAllFormattingExceptBasicTags() {
const selection = window.getSelection();
if (!selection || selection.rangeCount === 0) {
return;
}

const range = selection.getRangeAt(0);
const fragment = range.cloneContents();

// 递归函数来处理节点
function processNode(node) {
if (node.nodeType === Node.TEXT_NODE) {
// 直接返回文本节点
return document.createTextNode(node.textContent);
}

if (node.nodeType === Node.ELEMENT_NODE) {
// 检查是否是允许保留的“基本”标签（例如 div, p, br, span (如果需要)）
// 这里仅作示例，你可以根据需要添加或移除标签
const allowedTags = ['DIV', 'P', 'BR', 'SPAN']; // 示例，可以根据需求调整
if (allowedTags.includes(node.tagName)) {
const newElement = document.createElement(node.tagName);
// 递归处理子节点
node.childNodes.forEach(child => {
const processedChild = processNode(child);
if (processedChild) {
newElement.appendChild(processedChild);
}
});
return newElement;
} else {
// 如果是其他标签，则将其内容“提升”上来，忽略该标签本身
const tempFragment = document.createDocumentFragment();
node.childNodes.forEach(child => {
const processedChild = processNode(child);
if (processedChild) {
tempFragment.appendChild(processedChild);
}
});
return tempFragment;
}
}
// 忽略其他节点类型 (注释节点等)
return null;
}

const processedFragment = processNode(fragment);

// 移除选中文本
range.deleteContents();

// 插入处理后的内容
if (processedFragment && processedFragment.childNodes.length > 0) {
range.insertNode(processedFragment);
// 将光标移动到处理后内容的末尾
let lastChild = processedFragment.lastChild;
while (lastChild && lastChild.nodeType === Node.ELEMENT_NODE && lastChild.lastChild) {
lastChild = lastChild.lastChild;
}
if (lastChild) {
range.setStartAfter(lastChild);
} else {
// 如果插入的是空 fragment，将光标设置到 range 的开始位置
range.collapse(true);
}
} else {
// 如果处理后是空，直接在 range 的开始位置创建一个空文本节点
const emptyTextNode = document.createTextNode('');
range.insertNode(emptyTextNode);
range.setStartAfter(emptyTextNode);
}

range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}


这个精细的函数：

* processNode 函数递归地遍历 DocumentFragment。
* 对于文本节点，它直接返回一个文本节点。
* 对于元素节点，它检查 tagName 是否在 allowedTags 列表中。
* 如果允许，它创建一个新的同名元素，并递归地处理其子节点。
* 如果不允许，它会“提升”该元素的子节点内容，丢弃该元素本身。
* 最后，它将处理后的 DocumentFragment 插入到编辑器中，并重置光标。

如何使用：

1. HTML:
html
<div id="editor" contenteditable="true" style="border: 1px solid black; min-height: 100px; padding: 10px;">
这是一段 <strong style="color: red;">带格式</strong> 的文本。
<span style="text-decoration: underline;">另一段</span>。
</div>
<button onclick="clearSelectedFormatting()">清除选中格式 (简单)</button>
<button onclick="clearAllFormattingExceptBasicTags()">清除选中格式 (保留基本标签)</button>

2. JavaScript:
将上面提供的 JavaScript 函数粘贴到你的脚本中，并与按钮的 onclick 事件关联。

总结

* 最简单（不推荐）： document.execCommand('removeFormat')
* 最灵活和推荐（手动 DOM 操作）： 通过 window.getSelection() 和 Range API 来获取、修改和重新插入 DOM 节点。
* 最专业（构建编辑器）： 使用 QuillJS, TinyMCE, CKEditor 等第三方库。

在实际项目中，除非是简单的演示，否则 手动 DOM 操作 或 使用第三方库 是更可靠和可维护的选择。