将HTML DOM结构转换为JSON

Question

我在此上浪费了很多时间。递归部分非常虚幻。
对于未知深度的给定HTML结构，我需要转换为JSON。
（我从正在构建的某些YAML i18n翻译系统中使用此功能）

我的一般想法是深入了解，直到找到INPUT，然后使用的键/值创建一个对象，然后span.innerHTML/input.value返回该对象，因此它将是最后<span class="title">到达的KEY的值。

（是的，开发有点复杂，但非常有趣）

JSBIN游乐场 -实时代码示例

我无法让递归函数正常工作，无法输出所需的JSON …

HTML结构

<ul>
    <li>
        <span class="title">footer</span>
        <ul>
            <li>
                <span>statement</span>
                <input type="text" value="xxx">
            </li>
        </ul>
    </li>
    <li>
        <span class="title">landing</span>
        <ul>
            <li>
                <span>page_title</span>
                <input type="text" value="yyy">
            </li>
            <li>
                <span>page_sub_title</span>
                <input type="text" value="xxx">
            </li>
            <li>
                <span class="title">pricing</span>
            <ul class="level11">
                <li>
                    <span>title</span>
                    <input type="text" value="aaa">
                </li>
                <li>
                    <span>cost</span>
                    <input type="text" value="xxx">
                </li>
            </ul>
            </li>
        </ul>
    </li>
</ul>

（想要的）JSON输出

{
    footer : {
        statement : 'xxx'
    },
    landing : {
        page_title : 'yyy',
        page_sub_title : 'xxx',
        pricing : {
            title : 'aaa',
            cost : 'xxx'
        }
    }
}

Answer 1

如果您可以说服自己使用jQuery，请尝试以下操作：

function helper(root) {
  var result = {};

  $('> ul > li > span', root).each(function () {
    result[$(this).text()] = $(this).hasClass('title') ? helper($(this).parent()) : $(this).next('input').val();
  });

  return result;
}

console.log(helper('body'));