清除范围内的格式答案

【问题标题】：clear format in range清除范围内的格式
【发布时间】：2013-02-06 17:44:55
【问题描述】：

contenteditable div 中选定文本的格式如何清晰？

我有range = window.getSelection().getRangeAt(0); 的范围，那么我怎样才能清除它所有子项的格式？

谢谢

【问题讨论】：

【解决方案1】：

下面将用纯文本替换范围的内容，但如果整个范围都包含在单个格式化元素中，那么这种方法将不起作用，问题会更加困难。您需要在范围边界处拆分和克隆节点。此外，源自<br> 的文本中的换行符和块元素也会丢失。因此，以下内容适用于以下内容（由管道字符表示的范围边界）：

<p>One |two <b>three</b> four| five</p>

...但不是

<p>One <b>two |three| four</b> five</p>

代码：

function flattenRangeText(range) {
    var textNode = document.createTextNode( range.toString() );
    range.deleteContents();
    range.insertNode(textNode);
    range.selectNodeContents(textNode);
}

【讨论】：

【解决方案2】：

您可以在现代浏览器中尝试 Document.execCommand('removeFormat')。

参考：https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

删除格式

从当前选择中删除所有格式。

【讨论】：