有關解析 HTML - Githubissues

ilyi1116 commented 8 years ago

你好，我在使用 Ji 時，遇到了點問題.. 我的 HTML CODE 如下：

<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="http://life.tw/?app=view&no=431445">
    <link rel="stylesheet" title="Lifetw" href="#">
    <meta property="fb:article_style" content="Lifetw">
    <title>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</title>
  </head>
  <body>
  <article>
          <header>
    <figure>
    <img src="http://images.900.tw/upload_file/33/content/dc38a115-5732-b707-34d2-83513508a273.jpg">
    <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
    </figure>

    <h2> 可愛的兔兔應該是繼汪星人和喵星人之外比較常見的家庭寵物，而在日本就有一隻垂耳兔PuiPui不只本身擁有超萌的高顏值，她的主人也很用心地幫PuiPui準備專屬服裝，並且在Instagram上分享牠的變裝... </h2>

    <address>
      Styletc樂時尚    </address>

    <time class="op-published" dateTime="2016-05-11T09:15:25+08:00">Wed, 11 May 2016 09:15:25 +0800</time>
    <time class="op-modified" dateTime="2016-05-11T09:15:25+08:00">Wed, 11 May 2016 09:15:25 +0800</time>
    </header>    
    <p>可愛的兔兔應該是繼汪星人和喵星人之外比較常見的家庭寵物，而在日本就有一隻垂耳兔PuiPui不只本身擁有超萌的高顏值，她的主人也很用心地幫PuiPui準備專屬服裝，並且在Instagram上分享牠的變裝日記，讓PuiPui成為超多粉絲追蹤的人氣時尚潮兔，快一起來認識PuiPui吧！</p>

<figure>
  <img src="http://images.900.tw/upload_file/33/content/dc38a115-5732-b707-34d2-83513508a273.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼穿上可愛的學生制服、萌兔PuiPui要在櫻花的目送下上學去啦！</p>
<a href="http://www.styletc.com/wp-content/uploads/2016/05/110.jpg">
<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/110.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>
</a>

<p>▼到了秋天就換上福爾摩斯裝來襯托深沉的秋意！</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/28.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼萬聖節這個最重要的變裝日子當然要穿上可愛的巫師裝！</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/36.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼PuiPui的毛絨絨可愛模樣為什麼會這麼適合英國軍人裝啊~</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/46.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼地表最萌的聖誕小精靈，可以請聖誕老公公送一隻這樣的小精靈給我嗎？</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/53.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼雖然是會融化人心的可愛外表，但穿上了正式的日式傳統衣服也意外地有堂堂男子漢的氣息啊</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/61.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼我不只是主人捧在手掌心疼的小兔兔，也是我們家的國王喔（威顏貌）</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/71.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼穿上帥帥的水手服到公園進行偷親女朋友計畫成功！</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/81.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼夏天到冰店打工就是要一身清爽的夏日浴衣才可以~</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/9.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼主人：「要乖乖的戴好帽子帥帥的出門喔！」</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/101.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼為了搭配世界盃主題來場足球員cosplay好了，但也不要小看兔兔的靈敏度啊！</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/111.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼穿上全套英國紳士西裝之後根本就是個一秒奪取女心的寮妹高手！</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/121.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼今天的扮裝重點是&hellip;&hellip;加班中的上班族？！</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/131.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼來檢查一下主人拍我的照片成果如何？</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/141.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>▼嗯&hellip;&hellip;今天到底該穿哪一件呢（苦惱中）</p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/151.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>還想看更多萌兔PuiPui的穿搭日記嗎？那就快來追蹤「mumitan」這個Instagram帳號&gt;&gt;&gt;<a href="https://www.instagram.com/mumitan/">https://www.instagram.com/mumitan/</a></p>

<figure>
  <img src="http://www.styletc.com/wp-content/uploads/2016/05/161.jpg" />
  <figcaption>哥什麼造型都能消化！超卡哇伊又高顏值的萌兔PuiPui穿搭日記圖集...第12張簡直是撩妹高手呀！</figcaption>
</figure>

<p>看更多&gt;&gt;&gt;</p>
<p><a href="http://www.styletc.com/archives/129688">毛小孩也要開萬聖趴，寵物變裝造型靈感大集合！</a></p>
<p><a href="http://www.styletc.com/archives/229939">背面萌度x2，快來追蹤柯基屁屁Instagram帳號！</a></p>
<p><a href="http://www.styletc.com/archives/220203">《管教惡貓》主持人傑克森蓋勒克西獨家馭貓術大公開</a></p>

<p>圖片來源：<a href="https://www.instagram.com/mumitan/">mumitan&nbsp;Instagram</a></p>

<p>【<a href="http://www.styletc.com/archives/233782" target="_blank">本文出處</a>，更多精采內容請上《<a class="navbar-link" href="http://www.styletc.com/">Styletc樂時尚</a>》官方網站；《<a class="navbar-link" href="https://www.facebook.com/pages/Styletc%E6%A8%82%E6%99%82%E5%B0%9A/1436316026651285?fref=ts">Styletc樂時尚</a>》官方粉絲團。未經授權，請勿轉載！】</p>
<figure class="op-ad">
<iframe src="http://fbarticle.life.tw/dfp.html" height="280" width="336"></iframe>
</figure>
        <footer>
    <aside>
      Life Talk copyright© 2011 ALL ACCESS HOLDING GROUP LTD., All rights reserved. 客服專線：0800-090-789
    </aside>
    <small>© Life生活網</small>
  </footer>  </article>
  </body>
</html>

我想去Parse 每一個 'p', 'figure.img', 'figure.figcaption' .. 等試了好多方式，好像都只能單獨取一個 tag 而已..@@?

不知是否我的寫法有誤:

  let elements = jiDoc!.xPath("//p")!

            let count = elements.count
            for i in 0..<count {
                let x = elements[i].rawContent
                debugPrint("x : \(x)")
            }

honghaoz commented 8 years ago

Hi @ilyi1116

非常感謝你的issue。

我嘗試了以下代碼

let jiAppleSupportDoc = Ji(htmlURL: NSURL(string: "http://www.apple.com/support")!)
let pNodes = jiAppleSupportDoc?.xPath("//p")
pNodes?.forEach { p in
    debugPrint("p: \(p.content)")
}

console里打印出來的結果是：

"p: Optional(\"We’re here to help.\")"
"p: Optional(\"\\n                    \\t  Use up and down arrows to preview suggested search results or use enter key to go to results page\\n                 \\t \")"
"p: Optional(\"These popular topics will help you learn more about your Apple products.\")"
"p: Optional(\"Browse\\n\\t\\t\")"
"p: Optional(\"Browse\\n\\t\\t\")"
"p: Optional(\"Browse\\n\\t\\t\")"
"p: Optional(\"Find and share solutions with Apple users around the world.\")"
"p: Optional(\"Find out about your service coverage or the progress of a repair.\")"
"p: Optional(\"Review your eligibility for support and service.\")"
"p: Optional(\"View the status of hardware service you already have in progress.\")"
"p: Optional(\"Get support by phone, chat, or email, set up a repair, or make a Genius Bar appointment.\")"
"p: Optional(\"We’re here to provide tips, tricks, and helpful information when you need it most. And if you have a question, we’re here to help with that too.\")"
"p: Optional(\"Sign up to learn the basics or take your skills to the next level.\")"

//p應該是沒有問題的。請問您可以粘貼出更多的code嗎？沒有context，我也不知道你的具體問題出在哪裡

謝謝。

ilyi1116 commented 8 years ago

不好意思，可能我描述的不太清楚，我想擷取的是每一列的文字＋圖片... 我現在的想法是先解出第一個 'p', 之後再解出每一個 'figure', 再從每一個 'figure' 去解出文字，圖片，這邊我就卡住了@@" 不知該如何下手..

honghaoz commented 8 years ago

你可以試試//article/p[1], 這樣可以取到第一個p，然後用p.nextSibling來獲取這個p的下一個節點，也就是figure，有了這個figure，就可以從中取出其中的圖片。可以多次調用p.nextSibling，直到所有的p和figure都被檢查過。

honghaoz commented 8 years ago

比如可以這麼寫：

let firstP = jiDoc?.xPath("//article/p[1]")?.first // You got the first `p`
var nextNode = firstP?.nextSibling
while nextNode != nil {
    // Check nextNode is `p` or `figure`, do things you want
    // ...
    nextNode = nextNode?.nextSibling
}

方法還有很多種，你也可以先選取article節點，然後在它的children中篩選你需要的信息。

honghaoz / Ji

有關解析 HTML #30