如何从URL中获取元数据

Question

如何从URL中获取元数据

5

我刚开始使用 JavaScript，想要从 URL 中获取元数据……当在输入框中输入任何 URL 时，它必须从中提取元数据，这是在 html JavaScript 中基本使用方式，但执行代码时会抛出错误。

我正在寻找任何替代方法，但没有什么帮助。请提供任何想法如何实现此功能。

<!DOCTYPE html>
    <html>
    <body>
    <head>
      <meta name="description" content="Free Web tutorials">
      <meta name="keywords" content="HTML5,CSS,JavaScript">
      <meta name="author" content="John Doe">
      <meta content="http://stackoverflow.com/favicon.ico">
    </head>
    
    <p>Click the button to return the value of the content attribute of all meta elements.</p>
    
    <button onclick="myFunction()">Try it</button>
    
    <p id="demo"></p>
    
    <script>
    function myFunction() {
        var x = "https://www.amazon.in/"
      // var x = document.getElementsByTagName("META");
      var txt = "";
      var i;
      for (i = 0; i < x.length; i++) {
        txt = txt + "Content of "+(i+1)+". meta tag: "+x[i].content+"<br>";
      }
      
      document.getElementById("demo").innerHTML = txt;
    }
    </script>
    
    </body>
    </html>

- ats demo

1

你需要提取HTML，然后在“<meta>”和“</meta>”子字符串上进行拆分。 - Himanshu

你想要什么输出？ - Krupal Panchal

@KrupalPanchal 输出：标题、描述、标志或网站图标。 - ats demo

3个回答

-1

你可以使用 open-graph-scraper 来实现这个功能，请参考此答案获取详细信息。

- fredrivett

-1

使用fetch方法获取文本/HTML后，可以使用createElement方法解析DOM。然后，可以使用纯JavaScript解析实时DOM以访问DOM元素。例如，对于meta或link标签，我的方法如下：

let _sul = document.querySelector('link[rel="shortlink"]');
let _href = _sul.getAttribute('href')

使用 document.querySelector 或 document.querySelectorAll 可以访问 DOM 元素，并且可以使用 element.getAttribute 方法访问元素的属性。

- Vishal Kumar Sahu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Prasad Wargad · Accepted Answer

我猜你想使用javascript构建元数据抓取器，如果我没猜错的话。
在进一步请求任何url时，您需要考虑到CORS策略。

参考网址：

JSFiddle: http://jsfiddle.net/pgrmL73h/ 已演示如何从给定的URL获取meta标签。为了演示目的，我使用了https://jsfiddle.net/ URL来获取meta标签，您可以根据需要进行更改。

以下是检索META标记的步骤：

要从任何网站URL检索页面源代码，首先需要访问该网站。您可以使用jQuery AJAX方法实现。
参考网址：https://api.jquery.com/jquery.ajax/
使用jQuery的$.parseHTML方法，可以从HTML字符串中检索DOM元素。
参考网址：https://api.jquery.com/jquery.parsehtml/
一旦AJAX请求成功检索到页面源代码，我们会检查来自页面源代码的每个DOM元素，并根据需要过滤META节点，并将数据存储在“txt”变量中。

例如：将检索关键字、描述等标签。

一旦AJAX请求完成，我们将在段落标记中显示变量“txt”的详细信息。

JS代码：

function myFunction() {
  var txt = "";
  document.getElementById("demo").innerHTML = txt;
  // sample url used here, you can make it more dynamic as per your need.
  // used AJAX here to just hit the url & get the page source from those website. It's used here like the way CURL or file_get_contents (https://www.php.net/manual/en/function.file-get-contents.php) from PHP used to get the page source.
  $.ajax({
      url: "https://jsfiddle.net/",
      error: function() {
        txt = "Unable to retrieve webpage source HTML";
      }, 
      success: function(response){
          // will get the output here in string format
          // used $.parseHTML to get DOM elements from the retrieved HTML string. Reference: https://api.jquery.com/jquery.parsehtml/
          response = $.parseHTML(response);
          $.each(response, function(i, el){
              if(el.nodeName.toString().toLowerCase() == 'meta' && $(el).attr("name") != null && typeof $(el).attr("name") != "undefined"){
                  txt += $(el).attr("name") +"="+ ($(el).attr("content")?$(el).attr("content"):($(el).attr("value")?$(el).attr("value"):"")) +"<br>";
                  console.log($(el).attr("name") ,"=", ($(el).attr("content")?$(el).attr("content"):($(el).attr("value")?$(el).attr("value"):"")), el);
              }
          });
      },
      complete: function(){
          document.getElementById("demo").innerHTML = txt;
      }
  });
}