为什么 JS 函数在第一个 html 元素后停止执行？答案

【问题标题】：Why does the JS function stop execution after the first html element?为什么 JS 函数在第一个 html 元素后停止执行？
【发布时间】：2023-02-06 21:24:40
【问题描述】：

只需要保留li 标签。在其他标签中，只保留文本。

我的代码：

let html = `
<ol>
<li><a href="#"><code>foo</code> link text</a>;</li>
<li><a href="#"><code>bar</code> link text</a>;</li>
</ol>
<p>Paragraph text <code>baz</code> and <code>biz</code> text.</p>
<p>Paragraph text.</p>
`;

html = `<body>${html}</body>`;

let parsed = new DOMParser().parseFromString( html, 'text/html' );

function testFn( node  ) {

    node.childNodes.forEach( function( e ) {

        testFn( e );

        if ( e.nodeType !== Node.ELEMENT_NODE ) return;

        if ( e.nodeName.toLowerCase() !== 'li' ) {

            e.replaceWith( ...e.childNodes );
        }
    });
}

testFn( parsed.body );

console.log( parsed.body.innerHTML );

结果：

<li>foo link text;</li>
<li>bar link text;</li>

<p>Paragraph text <code>baz</code> and <code>biz</code> text.</p>
<p>Paragraph text.</p>

我需要这样的结果：

<li>foo link text;</li>
<li>bar link text;</li>

Paragraph text baz and biz text.
Paragraph text.

为什么函数不处理段落？

【问题讨论】：

如果您进行调试，您会注意到它永远不会到达您的<p> 元素。它循环通过 <ol> 然后退出。

标签： javascript html recursion

【解决方案1】：

forEach() 不是条件递归的理想选择，只会增加其对传递数组的闭包和回调处理的复杂性。这是您转换为 for...of 循环的逻辑。

let html = `
<ol>
<li><a href="#"><code>foo</code> link text</a>;</li>
<li><a href="#"><code>bar</code> link text</a>;</li>
</ol>
<p>Paragraph text <code>baz</code> and <code>biz</code> text.</p>
<p>Paragraph text.</p>
`;

html = `<body>${html}</body>`;

let parsed = new DOMParser().parseFromString(html, 'text/html');

function testFn(node) {
  for (const childNode of node.childNodes) {
    testFn(childNode);

    if (childNode.nodeType !== Node.ELEMENT_NODE) {
      continue;
    }

    if (childNode.nodeName.toLowerCase() !== 'li') {
      childNode.replaceWith(...childNode.childNodes);
    }    
  }
}

testFn(parsed.body);

console.log(parsed.body.innerHTML);

【讨论】：

【解决方案2】：

您正在更改 childNodes 并迭代它们。使用副本并且有效：

let html = `
<ol>
<li><a href="#"><code>foo</code> link text</a>;</li>
<li><a href="#"><code>bar</code> link text</a>;</li>
</ol>
<p>Paragraph text <code>baz</code> and <code>biz</code> text.</p>
<p>Paragraph text.</p>
`;

html = `<body>${html}</body>`;

let parsed = new DOMParser().parseFromString(html, 'text/html');

function testFn(node) {
  [...node.childNodes].forEach(function(e) {
    testFn(e);
  });
  
  [...node.childNodes].forEach(function(e) {
    if (e.nodeType !== Node.ELEMENT_NODE) return;

    if (e.nodeName.toLowerCase() !== 'li') {
      e.replaceWith(...e.childNodes);
    }

  });
}

testFn(parsed.body);
console.log(parsed.body.innerHTML);

【讨论】：