Last active
April 19, 2019 09:26
-
-
Save rike422/69a654c3a6e6094299ad7111f92ed216 to your computer and use it in GitHub Desktop.
シュッとHTMLをJSON化できるライブラリを作った ref: https://qiita.com/rike422/items/9b8a6f9bf16a5cbf5c99
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const kirinuki = require('kirinuki'); | |
const html = ` | |
<html> | |
<head> | |
<title>Hero News!</title> | |
</head> | |
<body> | |
<div class="main"> | |
<h3 class="topic">Amalgam</h3> | |
<ul class="news-list"> | |
<li> | |
<span class="content">Batman come back in Gossam City!</span> | |
<img class="thumbnail" src="https://exmaple.com/batman.png"></img> | |
</li> | |
<li> | |
<span class="content">Dr. Strange got into a traffic accident.</span> | |
<img class="thumbnail" src="https://exmaple.com/strange.png"></img> | |
</li> | |
</ul> | |
</div> | |
</body> | |
</html> | |
`; | |
const schema = { | |
topic: { | |
content: ".content", | |
contents: ".content" | |
} | |
} | |
kirinuki(schema, html) | |
// > { topic: { | |
// キーが複数形でない場合は、先頭のデータが入る。 | |
// content: 'Batman come back in Gossam City!' | |
// 複数系の場合は配列で帰ってくる。 | |
// contents: [ | |
// 'Batman come back in Gossam City!', | |
// 'Dr. Strange got into a traffic accident.', | |
// ] | |
// } } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul> | |
<li class="item">item1</li> | |
<li class="item">item2</li> | |
<li class="item">item3</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul> | |
<li class="item"> | |
<span class="topic">topic1</span> | |
<img src="https://example.com/imgs/img1.png"/> | |
</li> | |
<li class="item"> | |
<span class="topic">topic2</span> | |
<img src="https://example.com/imgs/img2.png"/ > | |
</li> | |
<li class="item"> | |
<span class="topic">topic3</span> | |
<img src="https://example.com/imgs/img3.png"/ > | |
</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"items": [ | |
{ | |
"topic": ["topic1","topic2","topic3",] | |
"thumbnail": [ | |
"https://example.com/imgs/img1.png", | |
"https://example.com/imgs/img2.png", | |
"thumbnail": "https://example.com/imgs/img3.png" | |
] | |
} | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const schema = { | |
item: ".item", | |
items: ".item" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"mainItems": { | |
"_root": ".main-items", | |
"_unfold": true, | |
"content": ".topic", | |
"image": "img" | |
}, | |
"subItems": { | |
"_root": ".sub-items", | |
"_unfold": true, | |
"content": ".topic", | |
"image": "img" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<ul class="main-items"> | |
<li class="item"> | |
<span class="topic">topic1</span> | |
<img src="https://example.com/imgs/img1.png"/> | |
</li> | |
<li class="item"> | |
<span class="topic">topic2</span> | |
<img src="https://example.com/imgs/img2.png"/ > | |
</li> | |
<li class="item"> | |
<span class="topic">topic3</span> | |
<img src="https://example.com/imgs/img3.png"/ > | |
</li> | |
</ul> | |
<ul class="sub-items"> | |
<li class="item"> | |
<span class="topic">sub-topic1</span> | |
<img src="https://example.com/imgs/sub-img1.png"/> | |
</li> | |
<li class="item"> | |
<span class="topic">sub-topic2</span> | |
<img src="https://example.com/imgs/sub-img2.png"/ > | |
</li> | |
<li class="item"> | |
<span class="topic">sub-topic3</span> | |
<img src="https://example.com/imgs/sub-img3.png"/ > | |
</li> | |
</ul> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul> | |
<li class="item"> | |
<span class="topic">topic1</span> | |
<img src="https://example.com/imgs/img1.png"/> | |
</li> | |
<li class="item"> | |
<span class="topic">topic2</span> | |
<img src="https://example.com/imgs/img2.png"/ > | |
</li> | |
<li class="item"> | |
<span class="topic">topic3</span> | |
<img src="https://example.com/imgs/img3.png"/ > | |
</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"mainItems": [ | |
{ | |
"topic": "topic1", | |
"thumbnail": "https://example.com/imgs/img1.png" | |
}, | |
{ | |
"topic": "topic2", | |
"thumbnail": "https://example.com/imgs/img2.png" | |
}, | |
{ | |
"topic": "topic3", | |
"thumbnail": "https://example.com/imgs/img3.png" | |
} | |
], | |
"subItems": [ | |
{ | |
"topic": "sub-topic1", | |
"thumbnail": "https://example.com/imgs/sub-img1.png" | |
}, | |
{ | |
"topic": "sub-topic2", | |
"thumbnail": "https://example.com/imgs/sub-img2.png" | |
}, | |
{ | |
"topic": "sub-topic3", | |
"thumbnail": "https://example.com/imgs/sub-img3.png" | |
} | |
] | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"items": [ | |
{ | |
"topic": "topic1", | |
"thumbnail": "https://example.com/imgs/img1.png" | |
}, | |
{ | |
"topic": "topic2", | |
"thumbnail": "https://example.com/imgs/img2.png" | |
}, | |
{ | |
"topic": "topic3", | |
"thumbnail": "https://example.com/imgs/img3.png" | |
} | |
] | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment