Skip to content

Instantly share code, notes, and snippets.

@rike422

rike422/file4.html

Last active April 19, 2019 09:26
Show Gist options
  • Save rike422/69a654c3a6e6094299ad7111f92ed216 to your computer and use it in GitHub Desktop.
Save rike422/69a654c3a6e6094299ad7111f92ed216 to your computer and use it in GitHub Desktop.
Download ZIP
シュッとHTMLをJSON化できるライブラリを作った ref: https://qiita.com/rike422/items/9b8a6f9bf16a5cbf5c99
Raw
readmeから抜き出したもの
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.',
// ]
// } }
Raw
file4.html
<ul>
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
</ul>
Raw
file7.html
<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>
Raw
jam-apiが返すjson
{
"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"
]
}
]
}
Raw
kirinukiに渡す形式
const schema = {
item: ".item",
items: ".item"
}
Raw
kirinukiに渡す形式
{
"mainItems": {
"_root": ".main-items",
"_unfold": true,
"content": ".topic",
"image": "img"
},
"subItems": {
"_root": ".sub-items",
"_unfold": true,
"content": ".topic",
"image": "img"
}
}
Raw
root.html
<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>
Raw
抽出したいhtml
<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>
Raw
結果
{
"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"
}
]
}
Raw
結果として期待しているjson
{
"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