---
# System prepended metadata

title: 12th 鐵人賽 Day_21 nokogiri ?
tags: [12th 鐵人賽]

---

---
title: 12th 鐵人賽 Day_21 nokogiri ?
tags: 12th 鐵人賽
--- 
# 12th 鐵人賽 Day_21 nokogiri ?

嗨！各位朋友大家好，打給後，歹嘎吼，胎尬喉，我是阿圓，一樣有請今天的one piece：
![](https://i.imgur.com/ao0RZnp.jpg)
(nokogiri!就是日文的鋸子！)

今天繼續來介紹好用的 gem ，今天要介紹的是！[nokogiri](https://github.com/sparklemotion/nokogiri) !這個是一種可以幫忙將網站上的資訊給"割"下來的套件！

一般來說，我們在實作爬蟲網站的時候，會去使用別人的API，拿回一包JSON，取出特定的值，再重新排列在頁面上，而 nokogiri 是拿回一整包的HTML結構，在使用 parser 來取用到 HTML 中的 tag！

## 安裝方法
`gem install nokogiri`
或是在 專案的 gemfile 裡
`gem 'nokogiri', '~> 1.6', '>= 1.6.8'`
然後`bundle install`

接著，在你要使用 nokogiri 的rb檔案裡，
```ruby=
require 'nokogiri'
require 'open-uri'
```
這樣就可以開始使用 nokogiri 的功能了！

## 使用方法
### 取回 document(網頁原始碼中`<html>`標籤裡的東西)
有好幾種方式：

```ruby=
#從 html 或 xml 檔案
html_doc = Nokogiri::HTML( File.open("test.html") )
xml_doc  = Nokogiri::XML( File.open("test.xml") )
#從 url
url = 'http://www.google.com/search?q=sparklemotion'
doc = Nokogiri::HTML(open( url ))
```
### 取用特定區塊
舉一個例子，先新增一個ruby的檔案，內容為：
```ruby=
require 'nokogiri'
require 'open-uri'

htmlData = "
<html>
	<title> This is a simple html </title>
	<body id='story_body'>
		<h2> this is h2 in story_body </h2>
	</body>
	<h1> test h1-1 </h1>
	<h1> test h1-2 </h1>
	<h3>
		<img src = 'goodPic-1.jpg' >
		<a href = 'www.google.com'> google web site </a>
		<img src = 'goodPic-2.jpg' > 
		<a href = 'www.yahoo.com'> yahoo web site </a>
	</h3>
	<div class= 'div_1'>
		<h2> this is h1 in div_1 </h2>
	</div>
</html>
"
doc = Nokogiri::HTML( htmlData )
```
接著來操作用 nokogiri 取到的doc：
```ruby=
puts doc.xpath("//h1")
# 取到全部的 h1 標籤，回傳為一個陣列：
# <h1> test h1-1 </h1>
# <h1> test h1-2 </h1>

puts doc.xpath('//h3/a')
#取出所有在 h3 下的 a，回傳為一個陣列
# <a href="www.google.com"> google web site </a>
# <a href="www.yahoo.com"> yahoo web site </a>

puts doc.xpath('//h3/a').text 
# google web site  yahoo web site 

# 也可以取用 tag 的屬性值
puts doc.xpath("//h3/a")[0]['href'] # www.google.com
puts doc.xpath("//h3/img")[0]['src'] # goodPic-1.jpg 

# 也可以用＠跟//組合
puts doc.xpath( "//@href" )
#www.google.com
#www.yahoo.com

# 找出特定 id or class 的 tag
puts doc.xpath("//div[@class='div_1']")
#<div class="div_1">
#    <h2> this is h1 in div_1 </h2>
#</div>
```
能夠取到從網站上"割"下來的東西，就能在自己的新作的頁面上做重新排列。
使用 nokogiri ，讓這件事情變得很簡單。




感謝各位看到這邊，若有任何建議，請各位不吝指教！我們明天見！
![](https://i.imgur.com/PPbpd2b.gif)