如何使用Microdata提取/解析HTML

Question

如何使用Microdata提取/解析HTML

Lea*_*ner 3 html javascript jquery 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

gue*_*314 5

尝试从根节点开始itemscope,过滤具有itemprop属性的后代元素; 返回对象result包含阵列items保持Microdata item秒.

该解决方案基于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>");

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

另请参阅微数据项的递归和循环

归档时间：	10 年，6 月前
查看次数：	3893 次
最近记录：	8 年，1 月前