javascript - 从字符串解析嵌套 html 标签时出现问题

Question

我有这段代码，用于将字符串解析为 html 并显示每个元素的文本。除非我有嵌套标签，否则效果很好，例如 <div><p>Element 1</p><p>Element 2</p></div> 。在本例中，代码显示 <p>Element 1</p><p>Element 2</p> 。我怎样才能一个接一个地获取每个标签？ (这里我想要 Element 1 然后 Element 2 )

代码如下:

let text = new DOMParser().parseFromString(stringHtml, 'text/html');
let textBody = text.body.firstChild;

while (textBody) {
    alert(textBody.innerHTML);
    // other actions on the textBody element
    textBody = textBody.nextSibling;
}

谢谢你帮助我

Answer 1

听起来您想要一个递归函数来打印其自身或其子级(如果有子级)的 textContent :

const stringHtml = '<div><p>Element 1</p><p>Element 2</p></div><div><p>Element 3</p><p>Element 4</p></div>';
const doc = new DOMParser().parseFromString(stringHtml, 'text/html');

const showElms = parent => {
  const { children } = parent;
  if (children.length) Array.prototype.forEach.call(children, showElms);
  else console.log(parent.textContent);
}
showElms(doc.body);

假设您想要迭代实际元素。如果您想要所有文本节点，请改为递归地迭代 childNodes。