一尘不染

将HTML DOM结构转换为JSON

json

我在此上浪费了很多时间。递归部分非常虚幻。
对于未知深度的给定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'
        }
    }
}

阅读 335

收藏
2020-07-27

共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'));
2020-07-27