JavaScript document.execCommand 删除格式块格式？答案

【问题标题】：JavaScript document.execCommand remove formatBlock formatting?JavaScript document.execCommand 删除格式块格式？
【发布时间】：2012-05-30 06:21:06
【问题描述】：

如果我在这样的页面上格式化一段文本：

document.execCommand('formatBlock', false, 'h1');

我该怎么做才能删除这种格式？

【问题讨论】：

撤消选项吗？ document.execCommand("Undo", false, null)
不幸的是，撤消不是一个选项，因为这可能会在不同的元素上执行多次，并且是部分用户控制的，我不想撤消之间的所有更改。
很公平。我认为您的选择仅限于手动 DOM 操作。

标签： javascript html formatting contenteditable

【解决方案1】：

~~我想document.execCommand('removeFormat',false,false) 会这样做吗？~~

在<h1>-block 上发出document.execCommand('formatBlock', false, 'div') 将删除<h1>-tag 并将其替换为<div>-tag¹。这样可行吗？

¹ 如果你没有使用 IE，那就是

【讨论】：

它没有。它会删除粗体、斜体、下划线等格式，但不会删除 HTML 标记。
除了没有很好的文档记录且不受 IE 支持的RemoveParaFormat，我想不出有任何execCommand 可以从选择中删除 html。也许正则表达式应该可以解决问题？
是否有很多未使用的div标签随机浮动的问题？如果没有，这应该没问题。
我认为这不是什么大问题。我想这些 div 并没有真正使用，您在 contentEditable 元素中单击的文本被一个 div 标签包围（有效地替换了先前分配的标签），仅此而已。您在 contentEditable 元素中创建的每一行也包含在 div 中。

【解决方案2】：

我用这个清除h1的效果：

document.execCommand('formatBlock', false, 'p');

您已将其格式更改为 h1，因此我们可以将其更改回正常的段落格式。
如果你把每个段落放在一个

中，你也可以使用这个：

document.execCommand('formatBlock', false, 'div');

将格式设置为与其他块相同。

【讨论】：

【解决方案3】：

我遇到了同样的问题，我需要删除包裹我的文本的 h1 标签。

我所做的是获取所选文本的父节点：

var elem_parent_node = window.getSelection().getRangeAt(0).startContainer.parentNode;

然后检查它的nodeName是否为“H1”；如果是，则将所选文本存储在 selected_text 变量中，然后删除节点本身：

elem_parent_node.remove();

那么，

document.execCommand('insertText', false, select_text);

【讨论】：

【解决方案4】：

要将 h1 替换为其文本内容节点，请使用以下代码。对于完整的代码，您需要添加一些检查以确保删除您想要的内容。

const button = document.getElementsByTagName('button')[0]
button.addEventListener('click', event => {
  const selection = window.getSelection()
  if (!selection.isCollapsed) {
    selection.anchorNode.parentNode.replaceWith(selection.anchorNode)
  }
})

<div contenteditable="true">
  <p>Some text</p>
  <h1>Select me then click the button</h1>
  <p>Some text</p>
</div>
<button>Click to remove H1</button>

【讨论】：

【解决方案5】：

您可能必须找到父标签，然后使用innerHTML 获取文本并将父标签和结束标签之间的原始数据替换为innerHTML。但是，这会删除所有格式。

【讨论】：

【解决方案6】：

似乎您无法“撤消”格式块。只要是另一个块级 HTML 标记，您始终可以将一个“formatBlock”替换为其他“formatBlock”。

【讨论】：