如何使用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.