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

Posted 2023-02-21

技术标签:

【中文标题】如何使用 JavaScript 从元标记中获取信息？【英文标题】：How do I get the information from a meta tag with JavaScript? 【发布时间】：2011-11-23 09:16:31 【问题描述】：

我需要的信息在一个元标记中。 property="video"时如何访问元标签的"content"数据？

HTML：

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

【问题讨论】：

请注意，<meta> 应该具有name 属性，而不是property。使用标准属性的开发人员将需要调整大多数答案给出的代码。 【参考方案1】：

其他答案应该可以解决问题，但这个更简单，不需要 jQuery：

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

原始问题使用带有property="" 属性的RDFa 标签。对于普通的 html <meta name="" …> 标签，您可以使用以下内容：

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

【讨论】：

简单，优雅，没有依赖。比接受的答案 imo 更好即使我的元数据在标签中，document.head.querySelector 给了我null 但document.querySelector 工作得很好要使其与 OG 标签一起使用，请像这样为它添加引号_： var title = document.head.querySelector('[property="og:title"]'); 不错。 “[内容]”部分用于什么目的？没有它，我也得到了元元素。 @citykid 这似乎有点多余。如果标签未被其“属性”找到，则 sn-p 将始终抛出 TypeError。在选择器中包含 [content] 会将该异常扩展到任何匹配标记都缺少内容属性的情况。 IMO 在这种情况下获得空结果更有意义，但我猜这取决于实施者的偏好。【参考方案2】：

你可以用这个：

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

【讨论】：

你真正想要的是'让'保持它们在本地定义;）如果你可以使用querySelector，你可以这样做：document.querySelector("meta[property='og:url']").getAttribute('content') 我认为这个答案并不相关，你真的应该使用***.com/questions/7524585/… 跳过这个答案。它在 OP 的 [不可否认的奇怪] 案例中不起作用，因为它查看的是“名称”而不是“属性”属性。在当前状态下，它过于复杂但没有任何向后兼容性优势——任何支持const/let的浏览器都应该支持.querySelector！只有一个元属性，为什么要循环多次？它可能有数百个元标记，或者可能需要多次获取元值。【参考方案3】：

这里有一个班轮

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

【讨论】：

【参考方案4】：

有一个更简单的方法：

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

【讨论】：

这至少可以追溯到 IE11，这使得它更有用。 document.querySelector 版本一直到 IE8，所以够用了这通常是一个很好的方法，但请注意，OP 使用的是 RDFa“属性”属性而不是更基本的“名称”属性 (***.com/questions/22350105/…)【参考方案5】：

function getMetaContentByName(name,content)
   var content = (content==null)?'content':content;
   return document.querySelector("meta[name='"+name+"']").getAttribute(content);

这样使用：

getMetaContentByName("video");

本页示例：

getMetaContentByName("twitter:domain");

【讨论】：

我使用了这个花絮，但在某个页面上得到了 type error 作为undefined，因为元标记本身丢失了。我通过分配一个变量并将document.queryselector 包装在一个try 语句中解决了这个问题，这样我就可以在出现错误时默认获得""。 function getMetaContentByName(name,content) var content = (content==null)?'content':content; try return document.querySelector("meta[name='"+name+"']").getAttribute(content); catch 返回空值； 【参考方案6】：

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

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

【讨论】：

假设 jquery，或者一些库；不是javascript【参考方案7】：

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

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

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

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

【讨论】：

这似乎有效（至少在 chrome 中）：document.getElementsByTagName('meta')['video'].getAttribute('content'); 如果标记如下：<meta name="video" content="http://video.com/video33353.mp4" /> @samdeV，这是这里所有解决方案中最干净的。提交它作为您自己的答案。 :) @samdeV，你也不需要 .getAttribute('content')，你只需 .content: document.getElementsByTagName('meta')['video'].content。我刚刚测试过，这在 Firefox 中也可以正常工作。我现在被告知它在 Safari 中不起作用。该死的。【参考方案8】：

方式 - [ 1 ]

function getMetaContent(property, name)
    return document.head.querySelector("["+property+"="+name+"]").content;

console.log(getMetaContent('name', 'csrf-token'));

你可能会得到错误：未捕获的类型错误：无法读取 null 的属性“getAttribute”

方式 - [ 2 ]

function getMetaContent(name)
    return document.getElementsByTagName('meta')[name].getAttribute("content");

console.log(getMetaContent('csrf-token'));

你可能会得到错误：未捕获的类型错误：无法读取 null 的属性“getAttribute”

方式 - [ 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'));

你得到的是null，而不是错误，这很好。

【讨论】：

【参考方案9】：

简单的，对吧？

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

【讨论】：

【参考方案10】：

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

这样就可以获取元的内容了。

【讨论】：

【参考方案11】：

此代码适用于我

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

var x = document.getElementsByTagName("META");
    var txt = "";
    var i;
    for (i = 0; i < x.length; i++) 
        if (x[i].name=="video")
        
             alert(x[i].content);

小提琴示例：http://jsfiddle.net/muthupandiant/ogfLwdwt/

【讨论】：

【参考方案12】：

function getDescription() 
    var info = document.getElementsByTagName('meta');
    return [].filter.call(info, function (val) 
        if(val.name === 'description') return val;
    )[0].content;

更新版本：

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

【讨论】：

【参考方案13】：

我的函数变体：

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

【讨论】：

【参考方案14】：

这是一个函数，它将返回任何元标记的内容并记忆结果，避免不必要的 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 */

这是一个扩展版本，它也查询open graph tags，并使用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"

【讨论】：

【参考方案15】：

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

通过包装函数，这也可以作为一个单行来完成。

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

【讨论】：

【参考方案16】：

仅供参考，根据https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta 全局属性是有效的，这意味着id 属性可以与getElementById 一起使用。

【讨论】：

【参考方案17】：

<html>
<head>
<meta property="video" content="http://video.com/video33353.mp4" />
<meta name="video" content="http://video.com/video33353.mp4" />
</head>
<body>

<script>
var meta = document.getElementsByTagName("meta");
    size = meta.length;

for(var i=0; i<size; i++) 
    if (meta[i].getAttribute("property") === "video") 
        alert(meta[i].getAttribute("content"));
    

meta = document.getElementsByTagName("meta")["video"].getAttribute("content");
alert(meta);
</script>
</body>
</html>

Demo

【讨论】：

【参考方案18】：

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

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

【讨论】：

【参考方案19】：

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

/* <meta name="video" content="some-video"> */

const meta = Array.from(document.querySelectorAll('meta[name]')).reduce((acc, meta) => (
  Object.assign(acc,  [meta.name]: meta.content )), );

console.log(meta.video);

【讨论】：

【参考方案20】：

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

【讨论】：

为了 *** 站点的目的，您的回复需要更完整，对您的代码的解释最少。【参考方案21】：

如果元标记是：

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

JQuery 将是：

const url = $('meta[name="url"]').attr('content'); // url = 'www.google.com'

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

const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'

【讨论】：

以上是关于如何使用 JavaScript 从元标记中获取信息？的主要内容，如果未能解决你的问题，请参考以下文章

如何从元组数组创建字典？

如何使用 JavaScript 函数从 Select Option 标记中获取值

如何使用 javascript 或 jquery 仅从字符串中获取所有 HTML 标记？ [关闭]

如何在 VueJs 组件中对 oembed javascript 标记进行整数处理？

如何使用javascript中的正则表达式在html标记中获取内容，包括标记？

使用 JAVA 类从元数据 DatabaseMetaData 中获取特定数据库表的外键和引用表名