javascript - 从 DOM 对象创建 DOM 树字符串的递归函数

Question

我目前正在努力尝试构建一个函数，该函数应该从解析 HTML5 ( node-html5-parser ) 中获取输入对象，我需要处理所有标签和子标签，以及它们的内容以输出一个 xml 字符串。我遇到的问题是如何获得递归函数(或任何函数)以正确维护 HTML5 标记顺序并输出内容。

例子:

<div><span>My Content</span></div>

使用 node-html5-parser，我在解析时得到以下信息:

rootElem {
    childNodes: [
        {
            tagName: 'div',
            childNodes: [
                {
                    tagName: 'span',
                    childNodes: [
                        {
                             rawText: 'My Content'
                        }
                    ],
                }
            ]
        }
    ]
}

我认为可以使用简单的 DFS 递归算法来构建字符串，但我无法使其正常工作。

const DOMRootObj = parse(this.htmlStr);

const processedData = this.processContent(DOMRootObj);

 processContent(root: any): string {
    if (root && !root.childNodes.length) {
      return root.rawText;
    } else {
      for (const childNode of root.childNodes) {

        const str = this.processContent(childNode);

        const { tagName } = childNode;

        if (tagName) {
          this.outputStr += `<${tagName}>${str}</${tagName}>`;
        }

      }
    }


  }

从这个由 parse() 函数解析的 HTML 中:(对象如上)

<div><span>My Content</span></div>

这最终输出:

<span>undefined</span><div>undefined</div>

但它应该输出:

<div><span>My Content</span></div>

Answer 1

不确定您期望哪种 XML 格式，但是递归调用并不难实现:

function toString(node, name="root") {
    let tag = typeof name === "string" ? name : node.tagName;
    return  tag ? `<${tag}>${(node.childNodes||[]).map(toString).join``}</${tag}>`
        : (node.rawText || "");
}

// Sample:
let rootElem = {
    childNodes: [{
        tagName: 'div',
        childNodes: [{
            tagName: 'span',
            childNodes: [{
                 rawText: 'My Content'
            }],
        }]
    }]
};

console.log(toString(rootElem, "root"));