How do I get the information from a meta tag with JavaScript

Question

The information I need is in a meta tag  How can I access the  content  data of the meta tag when property  video    HTML    lt meta property  video  content  http   video com video33353 mp4    gt

User · Accepted Answer

You can use this   function getMeta metaName      const metas   document getElementsByTagName  meta       for  let i   0  i  lt  metas length  i          if  metas i  getAttribute  name       metaName          return metas i  getAttribute  content                 return        console log getMeta  video

User · Answer

lt html gt   lt head gt   lt meta property  video  content  http   video com video33353 mp4    gt   lt meta name  video  content  http   video com video33353 mp4    gt   lt  head gt   lt body gt    lt script gt  var meta   document getElementsByTagName  meta        size   meta length   for var i 0  i lt size  i          if  meta i  getAttribute  property        video             alert meta i  getAttribute  content             meta   document getElementsByTagName  meta    video   getAttribute  content    alert meta    lt  script gt   lt  body gt   lt  html gt    Demo

User · Answer

Here s a function that will return the content of any meta tag and will memoize the result  avoiding unnecessary querying of the DOM          var getMetaContent    function            var metas               var metaGetter   function metaName               var theMetaContent  wasDOMQueried   true               if  metas metaName                     theMetaContent   metas metaName                   wasDOMQueried   false                            else                    Array prototype forEach call document getElementsByTagName  meta    function el                        if  el name     metaName  theMetaContent   el content                      metas metaName    theMetaContent                                                console log  Q wasDOMQueried  A     wasDOMQueried               return theMetaContent                    return metaGetter             getMetaContent  description       getMetaContent console logs the content of the description metatag  If invoked a second time it confirms that the DOM  was only queried once      And here s an extended version that also queries for open graph tags  and uses Array some   var getMetaContent    function            var metas               var metaGetter   function metaName               wasDOMQueried   true              if  metas metaName                     wasDOMQueried   false                            else                    Array prototype some call document getElementsByTagName  meta    function el                            if el name     metaName                              metas metaName    el content                             return true                                                    if el getAttribute  property       metaName                              metas metaName    el content                             return true                                                    else                            metas metaName     meta tag not found                                                                                 console info  Q wasDOMQueried  A     wasDOMQueried               console info metas               return metas metaName                     return metaGetter             getMetaContent  video        http   video com video33353 mp4

User · Answer

function getDescription         var info   document getElementsByTagName  meta        return    filter call info  function  val            if val name      description   return val         0  content      update version   function getDesc         var desc   document head querySelector  meta name description         return desc   desc content   undefined

User · Answer

function getMetaContentByName name content      var content    content  null   content  content     return document querySelector  meta name    name       getAttribute content       Used in this way   getMetaContentByName  video      The example on this page   getMetaContentByName  twitter domain

User · Answer

FYI according to https   developer mozilla org en-US docs Web HTML Element meta global attributes are valid which means the id attribute can be used with getElementById

User · Answer

The other answers should probably do the trick  but this one is simpler and does not require jQuery   document head querySelector   property  video  content    content    The original question used an RDFa tag with a property    attribute  For the normal HTML  lt meta name        gt  tags you could use something like   document querySelector  meta name  description     content

User · Answer

There is an easier way   document getElementsByName  name of metatag   0  getAttribute  content

User · Answer

In Jquery you can achieve this with      meta property  video        In JavaScript you can achieve this with   document getElementsByTagName  meta   item property  video

User · Answer

This code works for me   lt meta name  text  property  text  content  This is text    gt   lt meta name  video  property  text  content  http   video com video33353 mp4    gt    JS  var x   document getElementsByTagName  META        var txt           var i      for  i   0  i  lt  x length  i              if  x i  name   video                          alert x i  content                           Example fiddle  http   jsfiddle net muthupandiant ogfLwdwt

User · Answer

My variant of the function   const getMetaValue    name    gt      const element   document querySelector  meta name    name        return element  getAttribute  content

User · Answer

One liner here document querySelector  quot meta property  og image   quot   getAttribute  quot content quot

User · Answer

copy all meta values to a cache-object      lt meta name  quot video quot  content  quot some-video quot  gt      const meta   Array from document querySelectorAll  meta name     reduce  acc  meta    gt      Object assign acc     meta name   meta content            console log meta video

User · Answer

Way -   1    function getMetaContent property  name       return document head querySelector     property     name      content    console log getMetaContent  name    csrf-token       You may get error   Uncaught TypeError  Cannot read property  getAttribute  of null    Way -   2    function getMetaContent name       return document getElementsByTagName  meta   name  getAttribute  content      console log getMetaContent  csrf-token       You may get error   Uncaught TypeError  Cannot read property  getAttribute  of null    Way -   3    function getMetaContent name       name   document getElementsByTagName  meta   name       if name    undefined           name   name getAttribute  content            if name    undefined               return name                      return null    console log getMetaContent  csrf-token       Instead getting error  you get null  that is good

User · Answer

I personally prefer to just get them in one object hash  then I can access them anywhere  This could easily be set to an injectable variable and then everything could have it and it only grabbed once   By wrapping the function this can also be done as a one liner   var meta    function          var m   document querySelectorAll  meta    r           for  var i   0  i  lt  m length  i    1            r m i  getAttribute  name      m i  getAttribute  content             return r

User · Answer

if the meta tag is     lt meta name  url  content  www google com    gt    JQuery will be    const url      meta name  url     attr  content       url    www google com    JavaScript will be   It will return whole HTML   const metaHtml   document getElementsByTagName  meta   url    metaHtml     lt meta name  url  content  www google com    gt

User · Answer

If you use JQuery  you can use      meta property  video     attr  content

User · Answer

If you are interessted in a more far-reaching solution to get all meta tags you could use this piece of code  function getAllMetas         var metas   document getElementsByTagName  meta        var summary           Array from metas           forEach  meta    gt                var tempsum                   var attributes   meta getAttributeNames                attributes forEach function attribute                    tempsum attribute    meta getAttribute attribute                               summary push tempsum                   return summary        usage console log getAllMetas

User · Answer

Simple one  right   document head querySelector  meta property video    content

[javascript] How do I get the information from a meta tag with JavaScript?

Examples related to javascript

Examples related to html

Examples related to greasemonkey

Examples related to meta-tags