从URL解析制作漂亮的片段（如WhatsApp，Viber，Skype）

Question

我们在我们的网站上聊天，并希望改进它。用户经常互相发送新闻网站，文章，YouTube视频等链接

我们希望将这些链接转换为带有一些信息的精美图片，即“片段” 以下是示例

示例，Facebook聊天：http://c2n.me/3z442bv.jpg Skype：http://c2n.me/3z44a60.jpg

但它意味着编写自己的解析器，这是一项复杂的任务。是否有现成的库，提供此类服务的网站？

谢谢！

Answer 1

您可以使用开放图解析器
例如（在JQuery中打开图形解析器），您可以找到许多其他解析器 https://github.com/fiann/jquery.ogp

如今，大多数网站都使用开放图形标签。

修改 （来自github存储库的插件代码）

    (function($) {

  var checkNamespacePresent = function (node) {
    console.log("Checking for namespace on node", node);
    var i, attr, attributes = node.attributes || {};
    // we're looking for xmlns:og="http://opengraphprotocol.org/schema/"
    for (i = 0; i < attributes.length; i++) {
      attr = attributes[i];
      if (attr.nodeName.substring(0,5) === "xmlns" && 
          attr.nodeValue === "http://opengraphprotocol.org/schema/") {
        return attr.nodeName.substring(6);
      }
    }
    return null;
  }

  $.fn.ogp = function() {
    var ns = null, data = {};
    $(this).each(function () {
      $(this).parents().andSelf().each(function () {
        ns = checkNamespacePresent(this);
        console.log("Found %s on", ns, this);
        if (ns !== null) {
          return false;
        } 
      });

      // give up if no namespace
      if (ns === null) {
        console.log("No namespace found");
        return null;
      }

      // look for OGP data
      ns = ns + ":";
      $('meta', this).each(function () {
        console.log("Looking for data in element", this);
        var prop = $(this).attr("property"), key, value;
        if (prop && prop.substring(0, ns.length) === ns) {
          key = prop.substring(ns.length);
          value = $(this).attr("content");
          console.log("Found OGP data %s=%s", key, value);
          data[key] = data[key] || [];
          data[key].push(value);
        }
      });
    });

    // this is the total of everything
    console.log("All the data is ", data);

    return data;
  }
})(jQuery);