JSDOM：删除曾经嵌套的块引用，但留下 2+ 嵌套块引用答案

【问题标题】：JSDOM: removing once-nested blockquotes but leave 2+-nested blockquotesJSDOM：删除曾经嵌套的块引用，但留下 2+ 嵌套块引用
【发布时间】：2021-03-09 05:13:19
【问题描述】：

我正在尝试使用 Node.JS 中的 JSDOM 编辑一些 HTML。我希望删除任何<blockquote>，它是至多围绕<div> 的一个子项。但我希望保留两个或更多 <div>s 内的任何 <blockquote> 标签。我已经阅读了this question，但我仍然感到困惑。您可以在此JSFiddle 中看到我尝试过的内容。这是原始的 HTML：

<html>
    <div id="div1">
        <blockquote>Text 1</blockquote>
    </div>
    <div id="div2"> 
        <div id="div3"> 
            <blockquote>Text 2</blockquote>
            <div id="div4">
                <blockquote>Text 3</blockquote>
            </div>
        </div>
    </div>
<span onclick="removeblockquotes(this)">Change</span>
</html>

应该变成

<html>
    <div id="div1">
        Text 1
    </div>
    <div id="div2"> 
        <div id="div3"> 
            <blockquote>Text 2</blockquote>
            <div id="div4">
                <blockquote>Text 3</blockquote>
            </div>
        </div>
    </div>
</html>

这是我迄今为止尝试过的功能，但它不起作用（没有任何块引用发生变化）：

function removeblockquotes(e)
{
var x = document.querySelectorAll("blockquote"); 
x.forEach(y=>{
    if (y.parentNode.parentNode==null){
        y.parentNode.appendChild(x.innerHTML);
        y.parentNode.removeChild(x);
    };
});
}

【问题讨论】：

标签： javascript html node.js jsdom blockquote

【解决方案1】：

只需将两个.closest 调用链接到每个blockquote 以查看周围是否有多个div：

for (const b of document.querySelectorAll('blockquote')) {
  if (!b.closest('div')?.parentElement.closest('div')) {
    b.replaceWith(b.textContent);
  }
}
console.log(document.body.innerHTML);

<div id="div1">
    <blockquote>Text 1</blockquote>
</div>
<div id="div2"> 
    <div id="div3"> 
        <blockquote>Text 2</blockquote>
        <div id="div4">
            <blockquote>Text 3</blockquote>
        </div>
    </div>
</div>

（您需要一个 .parentElement，因为如果匹配，.closest 将返回它被调用的元素）

【讨论】：

太棒了。以前从未听说过 .closest。有时我想有一大堆我从未见过的酷 JS 函数词汇表。
嗯。这在 JSFiddle 中有效，但是当我尝试在我的 node.js 文件中实现时，我得到“SyntaxError: Unexpected token '.'”
您必须使用不支持可选链接的旧 Node 版本。最好的解决方案是升级你的节点。如果您不能这样做，请将第一个 div 存储在变量中并检查它是否不为空，然后再继续 parentElement
您需要可选的链接（或等效的），以免在 no <div> parent 存在时抛出错误。
刚刚将 package.js 中的版本从 12.x 更改为 14.x。现在可以了，谢谢。当
的内部包含 HTML 标签时我遇到了一些问题，但我可以单独解决这些问题。