如何使用Microdata提取/解析HTML
[英]How to extract/parse HTML using Microdata
問題描述
我對Microdata很新。
我有一個帶Microdata的HTML字符串。 我試圖弄清楚是否可以使用帶有JS或jQuery的Microdata動態提取所需的信息。 有沒有人這樣做過？
示例HTML字符串：我正在嘗試獲取與項目道具名稱'Blendmagic'的itemprop'legitValue'對應的'內容'
<html>
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blendmagic</span>
<span itemprop="price">$19.95</span>
<div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
<img src="four-stars.jpg" />
<meta itemprop="ratingValue" content="4" />
<meta itemprop="bestRating" content="5" />
Based on <span itemprop="ratingCount">25</span> user ratings
</div>
</div>
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">testMagic</span>
<span itemprop="price">$10.95</span>
<div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
<img src="four-stars.jpg" />
<meta itemprop="ratingValue" content="4" />
<meta itemprop="bestRating" content="5" />
Based on <span itemprop="ratingCount">25</span> user ratings
</div>
</div>
</html>
2 個解決方案
解決方案1
5 已采納 2015-05-12 21:35:10
嘗試從根itemscope節點開始，過濾具有itemprop屬性的后代元素; 返回對象result包含包含Microdata item的數組items 。
該解決方案基於Microdata上的算法
7將HTML轉換為其他格式
7.1 JSON
給定Document中的節點節點列表，用戶代理必須運行以下算法以將這些節點中的微數據提取為JSON格式：
讓結果成為一個空對象。
設項為空數組。
對於節點中的每個節點，檢查元素是否為頂級微數據項，如果是，則獲取該元素的對象並將其添加到項目中。
在結果中添加一個名為“items”的條目，其值為數組項。
以盡可能短的方式將結果序列化結果返回給JSON（意味着令牌之間沒有空格，數字中沒有不必要的零位數，只有字符串中的Unicode轉義符用於沒有專用轉義序列的字符），並且小寫在適當的情況下，“e”用於表示任何數字。 [JSON]
此算法返回一個具有單個屬性的對象，該屬性是一個數組，而不是僅僅返回一個數組，因此可以在將來擴展算法（如有必要）。
當用戶代理要獲取項目項的對象時，可選擇使用元素內存列表，它必須運行以下子步驟：
讓結果成為一個空對象。
如果沒有內存傳遞給算法，請將內存作為空列表。
將項目添加到內存中。
如果項目具有任何項目類型，請在結果中添加一個名為“type”的結果，其值是一個列出項目項目類型的數組，按照在itemtype屬性上指定的順序排列。
如果項具有全局標識符，請向結果中添加一個名為“id”的條目，其值為項的全局標識符。
設屬性為空對象。
對於具有一個或多個屬性名稱且屬於項目項屬性的每個元素元素，按照返回項的屬性的算法給出這些元素的順序，運行以下子步驟：
設value為元素的屬性值。
如果value是一個項，則：如果value在內存中，則將value設為字符串“ERROR”。 否則，獲取value對象，傳遞內存副本，然后將value替換為從這些步驟返回的對象。
對於元素屬性名稱中的每個名稱，運行以下子步驟：
如果屬性中沒有名為name的條目，則將名為name的條目添加到值為空數組的屬性。
將值附加到屬性中名為name的條目。
在結果中添加一個名為“properties”的條目，其值為對象屬性。
返回結果。
var result = {}; var items = []; document.querySelectorAll("[itemscope]") .forEach(function(el, i) { var item = { "type": [el.getAttribute("itemtype")], "properties": {} }; var props = el.querySelectorAll("[itemprop]"); props.forEach(function(prop) { item.properties[prop.getAttribute("itemprop")] = [ prop.content || prop.textContent || prop.src ]; if (prop.matches("[itemscope]") && prop.matches("[itemprop]")) { var _item = { "type": [prop.getAttribute("itemtype")], "properties": {} }; prop.querySelectorAll("[itemprop]") .forEach(function(_prop) { _item.properties[_prop.getAttribute("itemprop")] = [ _prop.content || _prop.textContent || _prop.src ]; }); item.properties[prop.getAttribute("itemprop")] = [_item]; } }); items.push(item) }) result.items = items; console.log(result); document.body .insertAdjacentHTML("beforeend", "<pre>" + JSON.stringify(result, null, 2) + "<pre>"); var props = ["Blendmagic", "ratingValue"]; // get the 'content' corresponding to itemprop 'ratingValue' // for item prop-name 'Blendmagic' var data = result.items.map(function(value, key) { if (value.properties.name && value.properties.name[0] === props[0]) { var prop = value.properties.reviews[0].properties; var res = {}, _props = {}; _props[props[1]] = prop[props[1]]; res[props[0]] = _props return res }; })[0]; console.log(data); document.querySelector("pre").insertAdjacentHTML("beforebegin", "<pre>" + JSON.stringify(result, null, 2) + "<pre>");
<!DOCTYPE html> <html> <head> </head> <body> <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">Blendmagic</span> <span itemprop="price">$19.95</span> <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating"> <img data-src="four-stars.jpg" /> <meta itemprop="ratingValue" content="4" /> <meta itemprop="bestRating" content="5" />Based on <span itemprop="ratingCount">25</span> user ratings </div> </div> <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">testMagic</span> <span itemprop="price">$10.95</span> <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating"> <img data-src="four-stars.jpg" /> <meta itemprop="ratingValue" content="4" /> <meta itemprop="bestRating" content="5" />Based on <span itemprop="ratingCount">25</span> user ratings </div> </div> </body> </html>
另請參閱微數據項的遞歸和循環
解決方案2
0 2015-05-12 21:08:19
檢查這個小提琴
$("span[itemprop='name']").each(function(e) {
if ($(arguments[1]).text() == 'Blendmagic') {
alert($($("meta[itemprop='ratingValue']")[e]).attr('content'));
}
});
如何檢測瀏覽器是否支持HTML5微數據API
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.