Getting META description via jQuery

Question

Let's say I do a simple AJAX request (in jQuery) like geturl.php?url=http://google.com

and geturl.php is this:

<?php
    if($_GET['url'])
    {
        $url=$_GET['url'];
        echo file_get_contents($url);
    }
?>

Simple, right?

How would I grab the META description from the returned (really long) string in jQuery?

Here's what I have so far. Yes, I know, desc is wrong.

$.get("geturl.php?url="+url,function(response)
{
    // Loading <title></title>data
    var title=(/<title>(.*?)<\/title>/m).exec(response)[1];
    var desc = $("meta[name=description]").val();
    $("#linkbox").html("<div><b>"+title+"</b><br/>"+url+"<br />Desc: " + desc)
});

Do you need only the description? Because then you could parse it in PHP — Pekka, Jan 04 '12 at 22:08
I'm with @Pekka; do this server side. And also: [regexps, HTML, parsing, don't... you know the drill](http://stackoverflow.com/a/1732454/147845). — You, Jan 04 '12 at 22:12

score 12 · Answer 1 · answered Jan 31 '12 at 00:29

While the answer by primatology does work, the statement about jQuery is wrong. A DOM is a DOM. jQuery does not care about whether we're looking for a <head> or <body> element. The following works just fine:

$('meta[name="description"]').attr('content');

Just make sure you call the function after the meta-tags have been loaded.

The error in the OP is the use of the val() function, which is used to get the value of a value attribute in form elements. But since the value of a meta tag lies in a content attribute, it does not work.

score 1 · Accepted Answer · edited May 23 '17 at 11:58

Using regular expressions to parse HTML is bad practice.

Annoyingly, jQuery doesn't support parsing elements in the head, only the body. So use straight JS instead:

window.onload = function(){ 
    $.ajax({
          type: 'GET', 
          url: '/',
          dataType: 'html',
          success: function(data) {

            //cross platform xml object creation from w3schools
            try //Internet Explorer
              {
              xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
              xmlDoc.async="false";
              xmlDoc.loadXML(data);
              }
            catch(e)
              {
              try // Firefox, Mozilla, Opera, etc.
                {
                parser=new DOMParser();
                xmlDoc=parser.parseFromString(data,"text/xml");
                }
              catch(e)
                {
                alert(e.message);
                return;
                }
              }

            var metas = xmlDoc.getElementsByTagName("meta");
            for (var i = 0; i < metas.length; i++) {
              if (metas[i].getAttribute("name") == "description") {
                alert(metas[i].getAttribute("content") || metas[i].getAttribute("edit"));
              }
            }
          }
    });
  }

Shamelessly ripped from David Burrows. Thanks, David!

fiddle: http://jsfiddle.net/wCL8W/8/

jQuery.parseXML will attempt to parse the document as well-formed XML, which will almost always fail :P — benesch, Jan 04 '12 at 22:29

Getting META description via jQuery

2 Answers2