我正在考虑在网页上实现一个简单的 2 按钮切换，以在具有 H1 标题和 H2 之间切换一些选定的文本。环绕内容方法效果很好，但是我在尝试替换现有的父标记元素节点时遇到了问题。我已经尝试了各种尝试做到这一点的方法，但没有取得太大的成功。
基本功能如下。使用相同的选定文本并一个接一个地运行这两个函数将产生一些输出，如下所示：
选择“测试文本”的文本后，然后选择 H1 选项：
<h1>test text</h1>
如果再次选择相同的文本并且这次按下 H2 选项：<h1><h2>test text</h2></h1>
function surroundSelectedWithH1() {
var element = document.createElement("h1");
// removed code to setup range to save space
if (range) {
range.surroundContents(element);
}
}
function surroundSelectedWithH2() {
var element = document.createElement("h2");
// removed code to setup range to save space
if (range) {
range.surroundContents(element);
}
}
这很好，并且可以预期，但我真的在寻找一种方法来删除原始父标题元素，以便标题元素不会嵌套（例如 - 文本被 h1 或 h2 包围，而不是两个都）。我确实尝试访问 parentNode 等，但没有设法使这种方法发挥作用。我已经尝试查看以下 parentElement 建议使用 rangy 库获取所选文本的父节点但是我无法让 rangy 将更改的父元素写回 DOM 或有一种令人满意的方式来确定 DOM 中的位置对象是为了替换它。它很快就变成了一种笨拙的方法，必须有更好的选择。
我知道 rangy CssApplier 模块可以处理这种情况，但我需要使用实际元素而不是 css。
我还注意到，在使用 rangy 进行文本编辑器实现的 raptor 编辑器上，在应用标题时会遇到完全相同的问题：http ://www.raptor-editor.com/demo
这个问题也很相关，但据我所知，execCommand 无法处理这个特定的元素问题 - Javascript: how to un-surroundContents range
亲切地接受任何帮助或建议。