阅读链接内容并解析它的技巧

实现类似Google +或类似Facebook的链接共享器的最佳实践是什么，当实体在textarea上粘贴链接时会获取链接的内容，特别是该页面的标题，示例文本和图像？阅读链接内容并解析它的技巧

这个问题是PHP/jQuery相关的。谢谢。

来源

2011-11-23 threepoint1416

不太清楚你所说的“一个实体粘贴在一个文本链接”是什么意思这里。你只是想通过PHP获取URL的标题/描述/等？ – Nick

是的。 'file_get_contents'似乎工作正常，但你认为这是最好的方法呢？ – threepoint1416

卷曲是更好的选择 – ajreal

没有进入任何细节。

在客户端上，您监视文本框上的更改并查找任何looks like an url。找到后，通过Ajax call发送到服务器。

服务器opens the remote url和parses it。现在您可以使用解析器来查找页面标题。 （您可能希望在尝试下载/解析某些用户的链接“.pdf”或“.mov”文件之前检查MIME类型...）

服务器响应ajax调用，（页面标题或错误消息）。

由于security rules on the browser，您需要通过自己的服务器。

更复杂的系统会查找语义元注释（如schema.org,microformat或facebook open graph）并将其解释为搜索相关图像，说明或视频。

来源

2011-11-23 16:55:35 Roman

看看get_meta_tags（具体来说就是这个链接到的注释中的函数 - 因为它也会得到title标签的内容）。

我不确定这是否是最好的解决方案，我知道很多人反对使用正则表达式来解析HTML，就像这个函数正在做标题标记一样，但是当我已经使用过它。

这也可以很容易地得到Facebook使用的og：元数据（如果它已经设置在你试图解析的URL上）。

来源

2011-11-23 16:56:04 Nick

无论您想如何处理此问题，都必须绕过same origin policy。也许最简单的方法是在服务器上放一个简单的PHP脚本来获取一个url并返回它。

根据你想要做什么工作（即你感觉舒服的语言），你可以采用客户端方法来解析或服务器方法。

客户机内解析策略

（working fiddle）

如果你想要做的jQuery的工作，你简单的PHP脚本将是这个样子：

<?php 

    // you could do this with curl too, plenty of tuts on that topic 
    $url = $_GET['url']; //todo: sanitize this! 
    print file_get_contents($url);

，那么你会像这样解析结果客户端：

jQuery(function($) { 
    // given an html response, extract the title 
    function getTitle(data) { 
     var matches = data.match(/<title>(.+)<\/title>/); 
     return matches.length > 1? matches[1] : ''; 
    } 

    // find the body tag of an element 
    // because browsers parse the innerHtml differently 
    // (http://stackoverflow.com/questions/2488839/does-jquery-strip-some-html-elements-from-a-string-when-using-html) 
    // we can't rely on just $(data) to do this right 
    function getBody(data) { 
     var matches = data.match(/<body>(.+)<\/body>/); 
     return $(matches[1]); 
    } 

    //given an html respones, extract a description 
    function getDesc(data) { 
     var $data = $(data); 
     var $match = $data.find('meta[name=description]'); 
     if ($match.length) { 
      return $match.attr('content'); 
     } 
     var $body = getBody(data); 
     return $body.text().substring(0, 255).replace(/\n/, ' '); 
    } 

    // this url would point to a proxy (PHP) script on your server 
    // which would do a curl or similar operation to retrieve the 
    // url's contents; we just point to fiddle's simulator here 
    $.ajax('/php_fetch_url.php', { 
     data: { 
      url: 'http://www.somedomain.to/fetch/' 
     }, 
     success: function(data, status, xhr) { 
      // assumes your debugger console (e.g. Firebug) is opened! 
      console.log(data); 
      console.log(status); 
      console.log(xhr); 

      console.log('title='+getTitle(data)); 
      console.log('desc='+getDesc(data)); 
     }, 
     type: 'GET', 
     error: function(xhr, status, err) { 
      console.log(status); 
      console.log(err); 
     }, 
     dataType: 'text' 
    }); 
});

服务器PARSING战略

如果你在PHP中感觉更舒适，还是真的要采取最有效，最安全的方法，那么你可以做在PHP中工作，并返回一个JSON对象。你的PHP脚本将是这个样子：

<?php 

    function fetchContent($url) { 
     //todo: sanitize $url! 
     return file_get_contents($url); 
    } 

    function fetchTitle($content) { 
     preg_match('@<title>([^<]+)</title>@m', $content, $matches); 
     return count($matches) > 1? $matches[1] : ''; 
    } 

    function fetchBody($content) { 
     return preg_replace('@.*<body>(.*)</body>.*@m', "\\1", $content); 
    } 

    function fetchDesc($content) { 
     preg_match('@<meta[\s\n+]name=[\'"]description[\'"][\s\n]+content=[\'"]([^'"]+)[\'"]@m', $content, $matches); 
     if(count($matches) > 1) { return $matches[1]; } 
     $body = fetchBody($content); 
    } 

    $content = fetchContent($_GET['url']); 

    // you may need to install json 
    // http://us.php.net/json 
    print json_encode(array("title" => fetchTitle($content), "description" => fetchDesc($content))));

然后你的js代码会是这个样子：

jQuery(function($) { 
    $.ajax('/php_fetch_url.php', { 
     // A CRUCIAL CHANGE! 
     dataType: 'json', 
     data: { 
      url: 'http://www.somedomain.to/fetch/' 
     }, 
     success: function(data, status, xhr) { 
      // assumes your debugger console (e.g. Firebug) is opened! 
      console.log('title='+data.title); 
      console.log('desc='+data.description); 
     }, 
     type: 'GET', 
     error: function(xhr, status, err) { 
      console.log(status); 
      console.log(err); 
     } 
    }); 
});

来源

2011-11-23 18:28:33 Kato

阅读链接内容并解析它的技巧

回答

相关问题