我是微数据新手。
我有一个带有Microdata的HTML字符串。我试图找出是否有可能使用带有JS或jQuery的Microdata动态提取所需的信息。有人做过吗？
HTML字符串示例:我试图获取与项目prop-name'Blendmagic'的itemprop'ratingValue'相对应的'content'
<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>
最佳答案
尝试从根itemscope节点开始，过滤具有itemprop属性的后代元素；返回包含包含result items的数组Microdata的对象item。
该解决方案基于Microdata中找到的算法
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>另请参阅Recursion and loops of Microdata items