时间戳

首页 > 解决方案 > JSDOM：删除曾经嵌套的块引用，但留下 2+ 嵌套块引用

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

问题描述

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

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

标签： javascripthtmlnode.jsjsdomblockquote

解决方案

只需将两个.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将返回它被调用的元素）

推荐阅读