CODEWITHSUNDEEP
javascriptjquery
brandonjschwartz
brandonjschwartz

Reputation: 157

Cross-domain Javascript - Pull Meta Tags

I'm building a Meteor.js app and one of the things I'd like to do is pull the title and meta description tags from a saved page. I'm using this cross domain program and have half of the code working.

Here's the excerpt; it takes the value given in a form tagged "url" and runs the code:

$.get(url, function(response){
      if ((suggestedTitle=((/<title>(.*?)<\/title>/m).exec(response.responseText))) != null){
          $('#title').val(suggestedTitle[1]);
      }else{
          $('#title').val(url);
      }
      if ((suggestedDesc=($('meta[name=description]').attr('content'))) != undefined){
        $('#desc').val(suggestedDesc[1]);
      }else{
        $('#desc').val('Description for this page cannot be found.');
      }
   });

I recognize it's not best practice to use regular expressions to parse HTML (open to suggestions on an alternative but I haven't looked into it too carefully) but that aside, this script successfully pulls the title from the URL or returns the web address if it can't be found, but the description fails and just returns the fallback text. Would appreciate some help, thanks :)

Upvotes: 2

Views: 1495

Answers (1)

Ian
Ian

Reputation: 50905

Instead of using regex or jQuery to parse the response, use DOM methods to go through the response text. Try this:

$.ajax({
    url: "http://www.google.com",
    type: "GET",
    async: true
}).done(function (response) {
    var div = document.createElement("div"),
        responseText = response.results[0],
        title, metas, meta, name, description, i;
    div.innerHTML = responseText;
    title = div.getElementsByTagName("title");
    title = title.length ? title[0].innerHTML : undefined;
    metas = div.getElementsByTagName("meta");
    for (i = 0; i < metas.length; i++) {
        name = metas[i].getAttribute("name");
        if (name === "description") {
            meta = metas[i];
            description = meta.getAttribute("content");
            break;
        }
    }
    console.log("Title:", title);
    console.log("Description:", description);
}).fail(function (jqXHR, textStatus, errorThrown) {
    console.log("AJAX ERROR:", textStatus, errorThrown);
});

DEMO: http://jsfiddle.net/KLdsG/3/

I put the plugin you provided at the top (it's minified so it will fit and you can still see your own code.

Obviously, this uses http://www.google.com, but you should be able to put any URL in and it work the same. Also, you can put this into a reusable function - I just wanted to show an example. I would assume it works the same with $.get() instead of $.ajax().

You can't directly use response.responseText, because the item returned is an object consisting of a few things. To get the HTML, you can use response.results[0]. response.results is obviously an array, and I'm not sure what else could be in there (like in index 1, 2, 3, etc.).

And I found weird things happening when I tried using $(response.results[0]), so I just stuck with normal DOM manipulation.

Upvotes: 1

Related Questions