querySelectorAll数据重复问题：合并span至带data-f属性的span元素

原代码问题分析 #

1. 选择器不匹配：原代码用span[data-footnote]查找目标元素，但实际需要定位的是带有data-f属性的span，导致无法找到正确的目标容器。
2. 变量名错误：代码中使用未定义的pTag，应替换为实际的段落变量para。
3. 冗余克隆操作：使用cloneNode(true)复制元素后再删除原元素，是内容重复的核心原因——直接移动原元素即可避免重复。
4. 过滤条件冗余：无需判断文本内容，只需排除目标span本身及其后代元素，防止误处理内部子span。

修正后的JavaScript代码 #

// 定位带有data-f属性的目标span
const targetSpan = para.querySelector('span[data-f]');
if (!targetSpan) return; // 容错处理：若找不到目标元素则终止

// 筛选需要移动的span：段落内所有span，排除目标span及其后代
const spansToMove = Array.from(para.querySelectorAll('span'))
  .filter(span => span !== targetSpan && !targetSpan.contains(span));

// 将选中的span直接移动到目标span内部
spansToMove.forEach(span => {
  targetSpan.appendChild(span);
});

正确输出结果 #

<p style="text-align: left; border-width: 0.5pt; border-style: initial; border-color: rgb(0, 0, 0); margin-top: 0pt; margin-bottom: 0pt;">
    <span style="font-size: 10pt; font-family: 'Times New Roman';">
        <span data-f="63f309c7cc71a7ae90e40d3b">
            Authorized share capital is&nbsp;<span data-fact="63f309c6cc71a7ae90e4098c">unlimited</span>
            <span style="font-size: 10pt; font-family: 'Times New Roman';">&nbsp;with&nbsp;no&nbsp;par value per Share. Shares issued and outstanding at March 31, 2022 were&nbsp;50,500,000&nbsp;and at December 31, 2021 were&nbsp;</span>
            <span style="font-size: 10pt; font-family: 'Times New Roman';"><span data-f1="63f309c6cc71a7ae90e409a4">44,750,000</span></span>
            <span style="font-size: 10pt; font-family: 'Times New Roman';">. Net asset values per Share at March 31, 2022 and December 31, 2021 were $23.89&nbsp;and $22.24, respectively.</span>
        </span>
    </span>
</p>

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