Retrieve description and keywords from HTML source using jquery

Question

I have an html code block that is returned by an Ajax call. Now I want extract description and keywords meta tags from it.

success: function (data) {
    //extracting page title by this way and it works as it should be ofc
    var urlTitle = resultback.match(/<title>(.*?)<\/title>/);
    urlTitle = urlTitle[1];

    //extract description
    //Currently using this method to retrieve description
    var startpos, endpos;
    startpos = endpos = 0;
    var urlDescription = "";
    startpos = data.indexOf('<meta name="description" content="') + 31
    endpos = data.indexOf('" />', startpos)
    urlDescription = $.trim(data.substring(startpos, endpos))
    //What if meta tag is like this :
    //<meta content="something" name="Description">
    //thats my point of its "always not gonna work"
}

EDITED

should I create my own ReGex for this reason or there is already a ReGex for this.

If you don't post the actual HTML "code block" itself, it's going to be hard to provide accurate assistance. — Pointy, Dec 31 '11 at 21:51
Can you paste what the returned HTML looks like? Using jQuery it's pretty straight forward to retrieve the values of html elements dynamically. — Ken, Dec 31 '11 at 21:55
_"But it’s not going to always work."_ - Exactly _what_ is not always going to work? If you don't post an actual question it's going to be hard to provide assistance. Are you saying the regex thing in the first code-block above doesn't work? Of course [in general you shouldn't use regex for parsing html](http://stackoverflow.com/a/1732454/615754), but it should work fine if the format is known in advance. How does that relate to the second code block? — nnnnnn, Jan 01 '12 at 01:41

Francis Lewis · Answer 1 · 2012-01-04T18:09:10.000

0

You can use the power of jQuery to pull out anything you need from your returned data - so the code you need is actually pretty small.

success: function (data) {
    // turn the result into a jQuery result set
    var $result = $(data),
        urlTitle = $result.find('title').text(), // gets the text of the title tag
        urlDescription = $result.find('meta[name="description"]').attr('content'), // gets the contents of the description metatag.
        urlKeywords = $result.find('meta[name="keywords"]').attr('content'); // gets the contents of the keywords metatag.

So I basically turn the data returned from the ajax request into a jQuery element then we can have jQuery search through it to get what we need.

edited Jan 04 '12 at 18:09

answered Jan 01 '12 at 03:37

Francis Lewis

8,872
9
55
65

I think jQuery only searchs entire body tag when we use .find(). that's why I skipped jQuery power. – mhesabi Jan 04 '12 at 08:25
No, jQuery will search the head as well. While viewing this page, open up firebug and try this code: $('head').find('link[rel="stylesheet"]'); – Francis Lewis Jan 04 '12 at 18:08

score 0 · Answer 2 · edited May 23 '17 at 10:08

Please include the value of data. Your HTML can be invalid and it's always easier to find a solution when you're able to recreate the problem.

However, it´s possible that $(data) becomes an array of elements rather than a DOM/jQuery object that $.find() can manage. I´ve created this example to demonstrate the difference, view the console for output.

The $() function returns an array and not a complete jQuery/DOM object of the following;

$('<html><head><meta name="keywords" content="key, word" /></head><body><div class="customClass">Lorem ipsum</div></body></html>')

See section "jQuery( html [, ownerDocument] )" at http://api.jquery.com/jQuery/.

For example $(data)[0] might very well return your title element.

You should also check the content type of the response.

Retrieve description and keywords from HTML source using jquery

2 Answers2