javascript - JavaScript document.execCommand 删除格式块格式？

Question

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

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

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

Answer 1

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

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

¹如果你没有使用 IE

Answer 2

我用这个清除 h1 的效果：

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

您已将其格式更改为 h1，因此我们可以以相同的方式将其更改回正常的段落格式。
如果你把每个段落放在 <div> 中，你也可以使用这个：

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

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

Answer 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);

Answer 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>

Answer 5

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

Answer 6

似乎您无法“撤消”格式块。只要它是另一个块级 HTML 标记，您总是可以用其他一些“formatBlock”替换一个“formatBlock”。