如何使用jQuery将Div内的数据转换为JSON格式并输出到控制台

你可以通过以下代码实现需求，核心逻辑是遍历目标div下的子节点拆分键值对，再转JSON输出：

完整可运行代码 #

<html>
  <div id="con">
    <div>Name : P</div>
    <div>Age : 20</div>
  </div>
  <!-- 把原来的append方法名换成自定义的exportToJson，避免和原生DOM方法冲突 -->
  <button type="button" onclick="exportToJson()">Export</button>

  <script>
    function exportToJson() {
      const conNode = document.getElementById('con')
      const outputObj = {}

      // 遍历con下所有子元素
      Array.from(conNode.children).forEach(item => {
        // 按冒号拆分键和值，去除前后多余空格
        const [key, value] = item.textContent.split(':').map(text => text.trim())
        outputObj[key] = value
      })

      // 转格式化的JSON字符串输出到控制台
      const jsonRes = JSON.stringify(outputObj, null, 2)
      console.log(jsonRes)
    }
  </script>
</html>

效果说明 #

点击Export按钮后，控制台会输出如下内容：

{
  "Name": "P",
  "Age": "20"
}

如果需要把Age这类数字格式的值转为数值类型，可以在赋值前增加类型判断逻辑即可。

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