Question

我对Microdata很新。

我有一个带Microdata的HTML字符串。我试图弄清楚是否可以使用带有JS或jQuery的Microdata动态提取所需的信息。有人曾经这样做过吗？

示例HTML字符串：我正在尝试为项目道具名称'Blendmagic'

获取对应于itemprop' ratingValue'的'内容'

<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>

Answer 1

尝试从根itemscope节点开始，过滤具有itemprop属性的后代元素;包含数组result的返回对象items，其中包含Microdata item个。

此解决方案基于Microdata

处的算法

7将HTML转换为其他格式

7.1 JSON

给定Document中节点的节点列表，用户代理必须运行   以下算法从这些节点中提取微数据到   JSON表格：

让结果成为空对象。

让item为空数组。

对于节点中的每个节点，检查该元素是否为顶级微数据   item，如果是，则获取该元素的对象并将其添加到   项目

在名为“items”的结果中添加一个条目，其值为数组项。

以最短的时间将结果序列化结果返回给JSON   可能的方式（意味着令牌之间没有空格，没有必要   数字为零，只在字符串中使用Unicode转义   没有专用转义序列的字符），以及   在适当的情况下，在任何表示中使用小写“e”   数字。 [JSON]

此算法返回一个具有单个属性的对象   数组，而不是只返回一个数组，以便它可以   如有必要，可以在将来扩展算法。

当用户代理要获取项目项的对象时，可选   使用元素内存列表，它必须运行以下子步骤：

让结果成为空对象。

如果没有内存传递给算法，请将内存作为空列表。

将项目添加到内存中。

如果项目有任何项目类型，请在结果中添加一个名为“type”的条目   其值是一个列出订单项目类型的数组   它们是在itemtype属性上指定的。

如果项目具有全局标识符，请向调用的结果添加条目   “id”，其值是item的全局标识符。

让属性成为空对象。

对于具有一个或多个属性名称的每个元素元素   项目项的一个属性，按顺序排列这些元素   由返回项目属性的算法给出，运行   以下子步骤：

设value为元素的属性值。

如果value是一个项目，那么：如果value在内存中，那么让值为   字符串“ERROR”。否则，获取值的对象，传递一个   内存的副本，然后用返回的对象替换值   那些步骤。

对于元素属性名称中的每个名称，请运行以下命令   子步骤：

如果属性中没有名为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>

另见Recursion and loops of Microdata items

Answer 2

选中此Fiddle

$("span[itemprop='name']").each(function(e) {
    if ($(arguments[1]).text() == 'Blendmagic') {
        alert($($("meta[itemprop='ratingValue']")[e]).attr('content'));       
    }    
});

如何使用Microdata

2 个答案: