JavaScript - quickest way to extract document meta fields

Question

I need to extract the document's "description" meta tag.

The default way would be to use document.getElementsByTagName('META') and then iterate through the array - as found in: http://www.rgagnon.com/jsdetails/js-0070.html

But I'm wondering if there's no other quicker, "one line of code" approach. I'm not familiar with xPath - but maybe that could work? Any ideas?

Answer 1

sure...

var desc = document.getElementsByName('description')[0].getAttribute('content');

This presumes that there is a Meta Tag named description of course.

To be more complete, this would catch the description regardless of case.

function getDesc(){
  var metas = document.getElementsByTagName('meta');
  for(var i=0;mLen=metas.length;i<mLen;i++){
    if(metas[i].getAttribute('name').toLowerCase() == 'description'){
      return metas[i].getAttribute('content');
    }
  }
  return null;//or empty string if you prefer
}
var desc = getDesc();

Answer 2

You can do it with XPath (in clients supporting document.evaluate) but that would probably be an overkill:

document.evaluate('//*[@name="description"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0);

Answer 3

Hi,

Scunliffe, I think your suggestion will definitely do the trick, at least the multi-line function will.

I came up with a solution that doesn't run on Webkit (Chrome + Safari) but which is very compact:

var metas = document.getElementsByTagName('META');
var value = (metas.namedItem ("description") || metas.namedItem ("Description") || metas.namedItem ("DESCRIPTION") || {}).content;

This will utilize the namedItem() function over the NodeList object, looking for most likely ways another programmer might write "description". Note that this will retrieve the values of tag's attribute, while ignoring case for attribute names:

<meta name="description" content="my description" />
<meta NAME="Description" CoNtEnT="my description" />

But alas (Oy Vey) the nameItem() doesn't work on Safari & Chrome :-( Maybe there's an alternative approach for those browsers...

Answer 4

It also depends on what you mean by 'quickest'- do you mean the shortest code you can write, or the fastest response from the browser?

For the quickest response, just look at the meta elements in the head element, and pick out any with the name 'description'.

{
  var s=[], metas=document.getElementsByTagName('head')[0].getElementsByTagName('meta');
  for(var i=0,L=metas.length;i<L;i++){
    if(metas[i].name=='description')s[s.length]=metas[i].content;
  }
  s= s.join(',');
}