通过选择`property`属性获取`Meta`属性`content`

Question

在jQuery中，你可以这样做：

$("meta[property='fb:app_id']").attr("content");

如何使用普通的JavaScript从具有属性“fb:app_id”的标签中获取content属性值？

谢谢您的帮助。 :-)

肯尼斯

- curly_brackets

Answer 1

恐怕不如 JQuery 那么优雅...

var metaTags=document.getElementsByTagName("meta");

var fbAppIdContent = "";
for (var i = 0; i < metaTags.length; i++) {
    if (metaTags[i].getAttribute("property") == "fb:app_id") {
        fbAppIdContent = metaTags[i].getAttribute("content");
        break;
    }
}

console.log(fbAppIdContent);

- mccannf

---

不完全相同，您需要在第一次出现 fb:app_id 上使用 break。 - zzzzBov

@zzzzBov：没错。我已经编辑了JS代码，使其成为JQuery语句的直接等效形式。 - mccannf

在ES6中，它稍微好一些：Array.from(document.getElementsByTagName('meta')).find($meta => { return $meta.getAttribute('name') === 'fb:app_id'; }).getAttribute('content'); - Augustin Riedinger

Answer 2

document.querySelector('meta[property~="fb:app_id"][content]').content

- swade

Answer 3

注意：一些人使用property属性：

<meta property="fb:app_id" content="1234567890">

而另一些人则使用name属性：

 <meta name="fb:app_id" content="1234567890">

我使用以下代码从两个变量中获取值：

var appId = (function(c) { for (var a = document.getElementsByTagName("meta"), b = 0;b < a.length;b++) {
  if (c == a[b].name || c == a[b].getAttribute("property")) { return a[b].content; } } return false;
})("fb:app_id");

console.log(appId); //(bool)false if meta tag "fb:app_id" not exists.

---

同样的方法也适用于所有其他元标记 - 只需在闭合函数上更改输入值（例如，从fb:app_id更改为description）。

---

编辑：或者作为更通用的函数：

function getContentByMetaTagName(c) {
  for (var b = document.getElementsByTagName("meta"), a = 0; a < b.length; a++) {
    if (c == b[a].name || c == b[a].getAttribute("property")) { return b[a].content; }
  } return false;
}

console.log(getContentByMetaTagName("og:title"));

- eyecatchUp