节点字符串到 JSON - JavaScript

在 JavaScript 中，我们经常需要将 DOM 节点转换为 JSON 格式。这个过程就叫做将节点字符串转换为 JSON。本文将介绍如何利用 JavaScript 将节点字符串转换为 JSON。

什么是节点字符串?

在 JavaScript 中，我们可以通过许多方式来获取节点。其中之一就是从 DOM 中获取节点的字符串表示。例如：

<div id="mydiv">Hello, world!</div>

我们可以通过以下代码获取这个 div 元素的字符串表示：

const nodeString = document.getElementById('mydiv').outerHTML;
console.log(nodeString);

输出结果：

<div id="mydiv">Hello, world!</div>

如何将节点字符串转换为 JSON？

将节点字符串转换为 JSON 的过程包括以下几个步骤：

1. 将节点字符串解析为 DOM 节点
2. 递归遍历 DOM 树，将节点转换为 JSON 对象
3. 将 JSON 对象转换为 JSON 字符串

以下代码展示了如何将节点字符串转换为 JSON：

function nodeStringToJson(nodeString) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(nodeString, 'text/html');
  return nodeToJson(doc.body.firstChild);
}

function nodeToJson(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    return node.textContent.trim();
  }

  const obj = {
    tag: node.nodeName.toLowerCase(),
  };

  if (node.attributes.length) {
    obj.attrs = {};

    for (let i = 0; i < node.attributes.length; i++) {
      const attr = node.attributes[i];
      obj.attrs[attr.nodeName.toLowerCase()] = attr.nodeValue;
    }
  }

  if (node.childNodes.length === 1 && node.firstChild.nodeType === Node.TEXT_NODE) {
    obj.text = node.firstChild.textContent.trim();
  } else if (node.childNodes.length) {
    obj.children = [];

    for (let i = 0; i < node.childNodes.length; i++) {
        obj.children.push(nodeToJson(node.childNodes[i]));
    }
  }

  return obj;
}

const nodeString = '<div id="mydiv">Hello, <strong>world!</strong></div>';
const json = nodeStringToJson(nodeString);
console.log(json);
console.log(JSON.stringify(json));

输出结果：

{
  "tag": "div",
  "attrs": {
    "id": "mydiv"
  },
  "children": [
    "Hello, ",
    {
      "tag": "strong",
      "children": [
        "world!"
      ]
    }
  ]
}

{
  "tag": "div",
  "attrs": {
    "id": "mydiv"
  },
  "children": [
    "Hello, ",
    {
      "tag": "strong",
      "children": [
        "world!"
      ]
    }
  ]
}

总结

在本文中，我们介绍了如何将节点字符串转换为 JSON。代码中使用了 DOMParser 对象将节点字符串转换为 DOM 节点，并使用递归算法将 DOM 树转换为 JSON 对象。将节点转换为 JSON 可以让我们更方便地操作 DOM 节点，也可以在网络传输 JSON 数据时传输 DOM 节点。