如何用JavaScript获取.comment的innerHTML并排除.reply子元素

现有HTML结构如下：

<body>    
    <span class="comment">
        EXAMPLES:
        <p><i>Example 1</i> - <a href="https://example.com/1">https://example.com/1</a> - Jan 2020 (2 comments)</p>
        <p><i>Example 2</i> - <a href="https://example.com/2">https://example.com/2</a> - Jun 2022 (13 comments)</p>
        <div class="reply"><p><u><a href="reply?id=12323" rel="nofollow">reply</a></u></p></div>
        <p><i>Example 3</i> - <a href="https://example.com/3">https://example.com/3</a> - Apr 2023 (33 comments)</p>
    </span>
</body>

需要获取.comment元素的innerHTML，但排除其中带.reply类的div元素（该div位置不固定），期望得到的内容为：

EXAMPLES:<p><i>Example 1</i> - <a href="https://example.com/1">https://example.com/1</a> - Jan 2020 (2 comments)</p><p><i>Example 2</i> - <a href="https://example.com/2">https://example.com/2</a> - Jun 2022 (13 comments)</p><p><i>Example 3</i> - <a href="https://example.com/3">https://example.com/3</a> - Apr 2023 (33 comments)</p>

目前已通过document.querySelectorAll('.comment > :not(.reply)')获取到目标节点列表，但该结果是NodeList而非innerHTML，想找更优方法把它转成能获取组合innerHTML的形式。

这里提供几种实用的方法：

方法1：克隆节点后移除冗余元素 #

这种方法不会改动原DOM，操作更安全：

// 获取目标元素
const commentEl = document.querySelector('.comment');
// 深克隆整个.comment元素
const clonedEl = commentEl.cloneNode(true);
// 移除克隆体里的.reply元素（可选链避免找不到元素报错）
clonedEl.querySelector('.reply')?.remove();
// 处理innerHTML的多余空格，匹配期望格式
const targetHTML = clonedEl.innerHTML.trim().replace(/\s+/g, '').replace(/></g, '><');
console.log(targetHTML);

方法2：遍历NodeList拼接内容 #

针对你已经拿到的NodeList，直接遍历拼接每个节点的outerHTML（要包含节点自身标签，所以用outerHTML而非innerHTML），同时别忘了开头的文本节点：

const nodes = document.querySelectorAll('.comment > :not(.reply)');
// 找到开头的"EXAMPLES:"文本节点
const textNode = Array.from(document.querySelector('.comment').childNodes)
  .find(node => node.nodeType === Node.TEXT_NODE && node.textContent.trim() === 'EXAMPLES:');

let targetHTML = textNode ? textNode.textContent.trim() : '';
// 遍历节点拼接outerHTML
nodes.forEach(node => {
  targetHTML += node.outerHTML;
});
// 可选：移除标签间的多余空格
targetHTML = targetHTML.replace(/\s+/g, '').replace(/></g, '><');
console.log(targetHTML);

方法3：用Range API精准选取内容 #

如果需要更精细地控制选取范围，Range API是个好选择：

const commentEl = document.querySelector('.comment');
const replyEl = commentEl.querySelector('.reply');
const range = document.createRange();

// 选取.reply之前的所有内容
range.setStart(commentEl, 0);
range.setEndBefore(replyEl);
const beforeReply = range.cloneContents().textContent.trim();

// 选取.reply之后的所有内容
range.setStartAfter(replyEl);
range.setEnd(commentEl, commentEl.childNodes.length);
const afterReply = range.cloneContents().innerHTML;

// 拼接结果并处理空格
const targetHTML = beforeReply + afterReply.replace(/\s+/g, '').replace(/></g, '><');
console.log(targetHTML);

内容的提问来源于stack exchange，提问作者sudoExclamationExclamation