jQuery HTML 到 JSON，包括 href 属性答案

【问题标题】：jQuery HTML to JSON, including href attributejQuery HTML 到 JSON，包括 href 属性
【发布时间】：2013-07-17 17:14:38
【问题描述】：

我在标记中有这样的数据：

  <p class="bbook">Lorem</p>
  <p class="bref">
     <a class="ref" href="prin.v.ii.ii.html">2:15</a>
     <a class="ref" href="prin.v.i.v.html">3:17-19</a>
     <a class="ref" href="prin.v.v.html">3:19 </a>
  </p>

 <p class="bbook">Ipsum</p>
 <p class="bref">
     <a class="ref" href="sec.vii.xxii.html">10:18</a>
     <a class="ref" href="sec.vii.ix.html">10:27</a>
     <a class="ref" href="sec.vii.xxiii.html">10:28</a>
 </p>

我想把它转换成这样的 JSON 对象：

{
    "Lorem": {
        "prin.v.ii.ii.html": "2:15",
        "prin.v.i.v.html": "3:17-19",
        "prin.v.v.html": "3:19"
    },
    "Ipsum": {
        "sec.vii.xxii.html": "10:18",
        "sec.vii.ix.html": "10:27",
        "sec.vii.xxiii.html": "10:28"
    }
}

我在这里看到了一些从 HTML 到 JSON 的解决方案，但我找不到与属性相关的解决方案。我知道如果标记有ul 可能会更容易，但事实并非如此。我怎样才能转换它？

【问题讨论】：

标签： jquery html json

【解决方案1】：

很容易，我想。以下是 jQuery 风格的 Javascript 中的一些示例代码，但您可以调整以使用您选择的语言中的 DOM 遍历器和 JSON 库。（例如，在 Perl 中，您将使用 HTML::TreeBuilder 和 JSON 模块。）

var json_obj = {};
$('p.bbook').each(function(i,el) {
    var which = $(el).text();
    var refs = {};
    $(el).next('p.bref').find('a.ref').each(function(i,el) {
        var href = $(el).attr('href');
        var chapter_verse = $(el).text();
        refs[href] = chapter_verse;
    });
    json_obj[which] = refs;
});
var json_result = JSON.stringify(json_obj);

此时，json_result 包含一个 JSON 字符串，其内容与您在问题中描述的内容相匹配。

【讨论】：

@Musa 谢谢！我忘了使用var 正确地确定变量的范围，如果你没有链接你的小提琴就不会发现错误。

【解决方案2】：

使用 jQuery 框架中的 $.parseJSON() 和 $.each()。这里举个例子：

$(document).ready(function () {
    var jsonp = '[{"Lang":"jQuery","ID":"1"},{"Lang":"C#","ID":"2"}]';
    var lang = '';
    var obj = $.parseJSON(jsonp);
    $.each(obj, function () {
        lang += this['Lang'] + "<br/>";
    });
    $('span').html(lang);
});

【讨论】：

您确定这是您要发布此代码的问题吗？它根本没有回答这个问题。
你说得对，问题是另一种意义上的......谢谢

【解决方案3】：

我认为你应该看看Beautiful Soup 4。

启动一个 Python 脚本，将 html 提供给汤，你应该能够将任何你想要的东西放入字典中，并在最后使用 json.dumps() 来获取你的 JSON。

# import/install bs4, json (already included)
end_json = {}

soup = BeautifulSoup(html_string)
books = soup.findAll('p', class='bbook')
for book in books:
    # etc, etc

编辑：不知道我怎么错过了问题标题中的 JQuery，但是 BS4 很棒。

【讨论】：

【解决方案4】：

http://jsfiddle.net/wDjhJ/

var result = {};
$('.bbook').each(function(a,b){
    var $this = $(b);
    result[$this.text()] = {};
    $this.next().find('a').each(function(k,v){
        var item = $(v);
        result[$this.text()][item.attr('href')] = item.text();
    });
});

$('body').append(JSON.stringify(result));

用几个循环遍历 dom。

【讨论】：

【解决方案5】：

jsFiddle

$(document).ready(function() {
    var O = {}, el, key, a;
    $('.bbook').each(function(index, value) {
        el = $(value);
        key = el.text();
        O[key] = {};
        el.next().find('a').each(function(i, v) {
            a = $(v);
            O[key][a.attr('href')] = a.text();
        });
    });

    console.log(JSON.stringify(O));
});

【讨论】：