如何使用JavaScript从元标记中获取信息？

我需要的信息在元标记中。当

property=“video”

时，如何访问元标记的

“content”

数据

HTML:

<meta property="video" content="http://video.com/video33353.mp4" />

您可以使用以下功能：

function getMeta(metaName) {
  const metas = document.getElementsByTagName('meta');

  for (let i = 0; i < metas.length; i++) {
    if (metas[i].getAttribute('name') === metaName) {
      return metas[i].getAttribute('content');
    }
  }

  return '';
}

console.log(getMeta('video'));

函数getMeta（metaName）{
const metas=document.getElementsByTagName（'meta'）；
for（设i=0；i

在Jquery中，您可以通过以下方式实现：

$("meta[property='video']");

document.getElementsByTagName('meta').item(property='video');

在JavaScript中，您可以通过以下方式实现这一点：

$("meta[property='video']");

document.getElementsByTagName('meta').item(property='video');

---

如果使用JQuery，则可以使用：

$("meta[property='video']").attr('content');

以这种方式使用：

getMetaContentByName("video");

本页的示例如下：

getMetaContentByName("twitter:domain");

这个代码对我有用

<meta name="text" property="text" content="This is text" />
<meta name="video" property="text" content="http://video.com/video33353.mp4" />

JS

var x=document.getElementsByTagName（“META”）； var txt=“”； var i； 对于（i=0；i

---

fiddle示例：

这里有一个函数，它将返回任何元标记的内容，并将结果记录下来，从而避免对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 */

这是一个扩展版本，它还可以查询和使用：

更新版本：

function getDesc() {
    var desc = document.head.querySelector('meta[name=description]');
    return desc ? desc.content : undefined;
}

---

其他答案可能会起作用，但这一个更简单，不需要jQuery：

document.head.querySelector("[property~=video][content]").content;

原始问题使用了一个带有

property=“

属性的标记。对于普通HTML

标记，您可以使用以下内容：

document.querySelector('meta[name="description"]').content

---

有一个更简单的方法：

document.getElementsByName('name of metatag')[0].getAttribute('content')

---

我个人更喜欢把它们放在一个对象散列中，然后我可以在任何地方访问它们。这可以很容易地设置为一个可注入变量，然后所有东西都可以拥有它，并且它只抓取一次

通过包装函数，也可以将其作为一个内衬来完成

var meta = (function () {
    var m = document.querySelectorAll("meta"), r = {};
    for (var i = 0; i < m.length; i += 1) {
        r[m[i].getAttribute("name")] = m[i].getAttribute("content")
    }
    return r;
})();

var meta=（函数（）{
var m=document.querySelectorAll（“meta”），r={}；
对于（变量i=0；i

这里有一行

document.querySelector("meta[property='og:image']").getAttribute("content");

---

方式-[1]

function getMetaContent(property, name){
    return document.head.querySelector("["+property+"="+name+"]").content;
}
console.log(getMetaContent('name', 'csrf-token'));

function getMetaContent(name){
    return document.getElementsByTagName('meta')[name].getAttribute("content");
}
console.log(getMetaContent('csrf-token'));

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'));

您可能会遇到以下错误： 未捕获的TypeError:无法读取null的属性“getAttribute”

---

---

方式-[2]

function getMetaContent(property, name){
    return document.head.querySelector("["+property+"="+name+"]").content;
}
console.log(getMetaContent('name', 'csrf-token'));

function getMetaContent(name){
    return document.getElementsByTagName('meta')[name].getAttribute("content");
}
console.log(getMetaContent('csrf-token'));

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'));

您可能会遇到以下错误： 未捕获的TypeError:无法读取null的属性“getAttribute”

---

---

方式-[3]

function getMetaContent(property, name){
    return document.head.querySelector("["+property+"="+name+"]").content;
}
console.log(getMetaContent('name', 'csrf-token'));

function getMetaContent(name){
    return document.getElementsByTagName('meta')[name].getAttribute("content");
}
console.log(getMetaContent('csrf-token'));

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'));

取而代之的是得到错误，你得到的是空的，这很好。

根据全局属性，FYI是有效的，这意味着如果元标记是：

<meta name="url" content="www.google.com" />

JavaScript将是：（它将返回整个HTML）

const metaHtml=document.getElementsByTagName（'meta'）。url//metaHtml=''

简单的一个，对吗

document.head.querySelector("meta[property=video]").content

var meta=document.getElementsByTagName（“meta”）；
尺寸=元长度；
对于（var i=0；iMy函数变量：

const getMetaValue = (name) => {
  const element = document.querySelector(`meta[name="${name}"]`)
  return element?.getAttribute('content')
}

如果您对获取所有元标记的更深远的解决方案感兴趣，您可以使用这段代码

function getAllMetas() {
    var metas = document.getElementsByTagName('meta');
    var summary = [];
    Array.from(metas)
        .forEach((meta) => {
            var tempsum = {};
            var attributes = meta.getAttributeNames();
            attributes.forEach(function(attribute) {
                tempsum[attribute] = meta.getAttribute(attribute);
            });
            summary.push(tempsum);
        });
    return summary;
}

// usage
console.log(getAllMetas());

将所有元值复制到缓存对象：

/**/
const meta=Array.from（document.querySelectorAll（'meta[name]））.reduce（（acc，meta）=>(
赋值（acc，{[meta.name]：meta.content}），{}）；
console.log（meta.video）；

这样你就可以得到meta的内容。
这似乎有效（至少在chrome中）：
document.getElementsByTagName（'meta'）['video'].getAttribute（'content'）；
如果标记如下所示：
@samdeV，这是所有解决方案中最干净的一个。将其作为你自己的答案提交。：@samdeV，另外，您不需要.getAttribute（'content'），只需要.content:document.getElementsByTagName（'meta'）['video'].content即可。我刚刚测试过，它在Firefox中也可以正常工作。我现在得知它在Safari中不起作用。该死。你真正想要的是让它们保持本地定义；）如果您可以使用querySelector，您可以这样做：
document.querySelector（“meta[property='og:url']”）。getAttribute（'content'）
我认为这个答案没有多大关系，您应该真正使用Skip这个答案。它在OP的（无可否认的奇怪）案例中不起作用，因为它关注的是“name”而不是“property”属性。在当前状态下，它过于复杂，但没有任何向后兼容性优势-任何支持
const
/
let
的浏览器都应该支持
.querySelector
！对于一个元属性，为什么要循环多次？它可能有数百个元标记，或者可能需要多次获取元值；不是javascriptI使用了这个技巧，但是在某个页面上，由于元标记本身丢失，所以得到了一个
类型错误
为
未定义
。我通过分配一个变量并将
document.queryselector
包装在一个try语句中来解决这个问题，这样在出现错误的情况下，我就可以在默认情况下获得
”
。函数getMetaContentByName（name，content）{var content=（content==null）？“content”：content；尝试{return document.queryselector（“meta[name=”+name+“]”）。getAttribute（内容）；}catch{returnnull；}}简单、优雅且没有依赖性。比公认的答案更好，即使我的meta在标记中，
document.head.querySelector
给了我
null
，但
document.querySelector
工作得很好，可以让它与OG标记一起工作，向它添加引号，如下所示var title=document.head.querySelector（'[property]=“og:title”]）；很好。部分“[content]”的作用是什么？如果没有它，我也会得到元元素。@citykid它似乎有点多余。如果标记的“属性”找不到，代码段将始终抛出类型错误。在选择器中包括
[content]
，则扩展了