如何从JSON对象获取HTML元素,内容或参数

时间:2015-12-12 12:34:46

标签: javascript angularjs json

{
  "rss": {
    "channel": {
      "title": "url..",
      "link": "url..",
      "description": "",
      "language": "en",
      "item": [
        {
          "title": "title..",
          "link": "http://www.*",
          "description": "          <img typeof=\"foaf:Image\" src=\"http://www.apetitonline.cz/sites/default/files/styles/630x420/public/recept/03.jpg?itok=2Kgsj3sM&c=2f56768ef5b85d1b98fa815e400ac524\" alt=\"\" />    \n<div class=\"field field-name-field-text-summary field-type-text-with-summary field-label-hidden\">\n    <div class=\"field-items\">\n          <div class=\"field-item summary\"></div>\n      <div class=\"field-item even\"><p>Hustá a hřejivá</p></div>\n      </div>\n</div><div class=\"easy_social_box clearfix horizontal easy_social_lang_cs\">\n            <div class=\"easy_social-widget easy_social-widget-facebook first\"><iframe src=\"//www.facebook.com/plugins/like.php?locale=cs_CZ&href=http%3A//www.apetitonline.cz/recept/polevka-s-quinoou-a-bataty&send=false&layout=button_count&width=88&show_faces=true&action=like&colorscheme=light&font=&height=21&appId=\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:88px; height:21px;\" allowTransparency=\"true\"></iframe></div>\n  </div> <!-- /.easy_social_box -->          <div>\n        <a href=\"/zpusob-pripravy/vareni\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Vaření</a>          <span class=\"hms hms-format-h-mm\">0:25</span>    </div>\n    <a href=\"/narocnost/velmi-snadne\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Velmi snadné</a>          <p><strong>1</strong> Propláchnutou quinou zalijte 375 ml vody a nechte máčet 15 minut. Pak slijte a odložte stranou.<br /><br /><strong>2</strong> V rendlíku rozehřejte na středním plameni olej. Přidejte speck a opékejte asi 4 minuty dozlatova. Vsypte cibuli a česnek a za stálého míchání opékejte další&nbsp;4 minuty, až změknou. Pak přidejte batáty a chilli a přilijte vývar a přiveďte k varu. Potom vsypte quinou a vařte asi 15 minut, až batáty změknou a quinoa bude vařená. Je-li polévka příliš hustá, můžete ji zředit vodou či vývarem. Na závěr vmíchejte špenátové lístky, osolte a podávejte ozdobené koriandrem.</p><p>&nbsp;</p>    <div class=\"easy_social_box clearfix horizontal easy_social_lang_cs\">\n            <div class=\"easy_social-widget easy_social-widget-facebook first\"><iframe src=\"//www.facebook.com/plugins/like.php?locale=cs_CZ&href=http%3A//www.apetitonline.cz/recept/polevka-s-quinoou-a-bataty&send=false&layout=button_count&width=88&show_faces=true&action=like&colorscheme=light&font=&height=21&appId=\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:88px; height:21px;\" allowTransparency=\"true\"></iframe></div>\n  </div> <!-- /.easy_social_box -->          <form class=\"fivestar-widget\" action=\"/rss.xml\" method=\"post\" id=\"fivestar-custom-widget\" accept-charset=\"UTF-8\"><div  class=\"clearfix fivestar-average-stars fivestar-form-item fivestar-default\">  <select id=\"edit-vote--2\" name=\"vote\" class=\"form-select\"><option value=\"-\">Zvolte hodnocení</option><option value=\"20\">Hodnotit jako 1 z 5</option><option value=\"40\">Hodnotit jako 2 z 5</option><option value=\"60\">Hodnotit jako 3 z 5</option><option value=\"80\">Hodnotit jako 4 z 5</option><option value=\"100\">Hodnotit jako 5 z 5</option><option value=\"0\" selected=\"selected\">Zrušit hodnocení</option></select>\n\n\n\n</div><input class=\"fivestar-submit form-submit\" type=\"submit\" id=\"edit-fivestar-submit\" name=\"op\" value=\"Hodnocení\" /><input type=\"hidden\" name=\"form_build_id\" value=\"form-bCN2xRxPcWEamTFOxHvk2idTQcUjmQFsK7slq-bRHDI\" />\n<input type=\"hidden\" name=\"form_id\" value=\"fivestar_custom_widget\" />\n</form>              Pro 4 osoby              <ul><li>200 g quinoy, propláchnuté</li><li>1 lžíce olivového oleje</li><li>200 g specku (tyrolské sušené&nbsp;šunky), nakrájeného na tenké plátky&nbsp;a na nudličky</li><li>1 cibule, nakrájená nadrobno</li><li>2 stroužky česneku, nakrájené&nbsp;nadrobno</li><li>800 g batátů (sladkých brambor),&nbsp;oloupaných a nakrájených na kostky</li><li>1 lžička drceného sušeného chilli</li><li>sůl</li><li>1,5 litru drůbežího vývaru</li><li>2 hrnky mladého (baby) špenátu</li><li>čerstvý koriandr na ozdobení</li></ul>              Soukromý                  <ul class=\"links\"><li class=\"taxonomy-term-reference-0\"><a href=\"/specialni-kriteria/z-jednoho-hrnce\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Z jednoho hrnce</a></li><li class=\"taxonomy-term-reference-1\"><a href=\"/specialni-kriteria/za-priznivou-cenu\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Za příznivou cenu</a></li></ul><ul class=\"links\"><li class=\"taxonomy-term-reference-0\"><a href=\"/denni-jidla/obed\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Oběd</a></li><li class=\"taxonomy-term-reference-1\"><a href=\"/denni-jidla/vecere\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Večeře</a></li></ul><a href=\"/druh-jidla/polevka\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Polévka</a><a href=\"/zpusob-pripravy/vareni\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Vaření</a><a href=\"/chody/polevka\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Polévka</a>\n\n\n    \n      <span class=\"field-item even\" rel=\"\"><a href=\"/ingredience/cibule\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Cibule</a>, </span>\n    \n      <span class=\"field-item odd\" rel=\"\"><a href=\"/ingredience/cesnek\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Česnek</a>, </span>\n    \n      <span class=\"field-item even\" rel=\"\"><a href=\"/ingredience/masne-vyrobky-a-uzeniny\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Masné výrobky a uzeniny</a>, </span>\n    \n      <span class=\"field-item odd\" rel=\"\"><a href=\"/ingredience/spenat\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Špenát</a>, </span>\n    \n      <span class=\"field-item even\" rel=\"\"><a href=\"/ingredience/zelenina\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Zelenina</a></span>\n    <a href=\"/delka-pripravy/do-20-minut\" typeof=\"skos:Concept\" property=\"rdfs:label skos:prefLabel\" datatype=\"\">Do 20 minut</a>          <div class=\"article-default\">\n  <div class=\"article-img\">          <a href=\"/recept/rizky-se-salveji-a-prosciuttem-obalovane-v-quinoe\"><img typeof=\"foaf:Image\" src=\"http://www.apetitonline.cz/sites/default/files/styles/310x206/public/recept/_mku0280.jpg?itok=rHCJtFu2\" alt=\"\" /></a>    </div>\n  <h3><a href=\"/recept/rizky-se-salveji-a-prosciuttem-obalovane-v-quinoe\">Řízky se šalvějí a prosciuttem obalované v quinoe</a></h3>\n</div>          <div class=\"article-default\">\n  <div class=\"article-img\">          <a href=\"/recept/burger-s-quinoou-tzatziki\"><img typeof=\"foaf:Image\" src=\"http://www.apetitonline.cz/sites/default/files/styles/310x206/public/recept/01_0.jpg?itok=lT9cBAbi&c=9262c5256b5c39b0f77126c28b01c3e0\" alt=\"\" /></a>    </div>\n  <h3><a href=\"/recept/burger-s-quinoou-tzatziki\">Burger s quinoou & tzatziki</a></h3>\n</div>          <div class=\"article-default\">\n  <div class=\"article-img\">          <a href=\"/recept/salat-s-quinoou-fetou-a-pecenou-dyni\"><img typeof=\"foaf:Image\" src=\"http://www.apetitonline.cz/sites/default/files/styles/310x206/public/recept/02.jpg?itok=49GTLW6P&c=f01a306f80f5b3a0c7a6d7003693b9d8\" alt=\"\" /></a>    </div>\n  <h3><a href=\"/recept/salat-s-quinoou-fetou-a-pecenou-dyni\">Salát s quinoou, fetou a pečenou dýní</a></h3>\n</div>          <div class=\"article-default\">\n  <div class=\"article-img\">          <a href=\"/recept/pilaf-s-merunkami-pistaciemi-a-goudou\"><img typeof=\"foaf:Image\" src=\"http://www.apetitonline.cz/sites/default/files/styles/310x206/public/recept/05.jpg?itok=VCICfp49&c=7a5b9517f8a56992ee6c1540d3f060bb\" alt=\"\" /></a>    </div>\n  <h3><a href=\"/recept/pilaf-s-merunkami-pistaciemi-a-goudou\">Pilaf s meruňkami, pistáciemi a goudou</a></h3>\n</div>          <div class=\"article-default\">\n    <div class=\"article-img\">          <a href=\"/menu/5x-zdrava-quinoa\"><img typeof=\"foaf:Image\" src=\"http://www.apetitonline.cz/sites/default/files/styles/310x206/public/kompilat/036_ape1411.jpg?itok=1qpSrULn\" alt=\"\" /></a>    </div>\n    <h3><a href=\"/menu/5x-zdrava-quinoa\">5x zdravá quinoa</a></h3>\n</div>              <a href=\"/casopis-apetit/2014-11\">2014/11</a>    <span property=\"schema:name\" content=\"Polévka s quinoou a batáty\" class=\"rdf-meta element-hidden\"></span><span rel=\"schema:url\" resource=\"/recept/polevka-s-quinoou-a-bataty\" class=\"rdf-meta element-hidden\"></span>",
          "pubDate": "Thu, 24 Dec 2015 23:50:18 +0000",
          "creator": {
            "__prefix": "dc",
            "__text": "xxx"
          },
          "guid": {
            "_isPermaLink": "false",
            "__text": "lalal"
          },
          "comments": "http://www.*#comments"
        }
      ]
    }
  }
}

所以我的问题是如何从 description 键获取图像src或divs内容 获取完整的描述内容我使用result.rss.channel.item.description,但我只想要解析图像源

2 个答案:

答案 0 :(得分:0)

尝试使用

result.rss.channel.item[0].description

因为从示例中看起来item是一个对象数组。

答案 1 :(得分:0)

你可以用jQuery做到这一点。

var $div = $('<div/>').html(obj.rss.channel.item[0].description);
var $img = $div.find('img')
$scope.imgSrc = $img.attr('src')

http://jsfiddle.net/h6mp1o56/

[更新:没有jQuery]

var div = angular.element('<div/>').html(obj.rss.channel.item[0].description);
var img = div.find('img')
$scope.imgSrc = img.attr('src')

http://jsfiddle.net/h6mp1o56/1/