javascript正则表达式获取标签属性值

Question

I am using below regex to find the content of title tag in a given string:

alert("<title  >kjkj</title><title>jjjjj</title>".match(/<title[^>]*>([^<]+)<\/title>/)[1]);

Next I want to find the content of meta property="og:title" :

<meta property="og:title" content="The Rock" /> is a string

I have no clue how to do that. I can't use jQuery or create any DOM element. Its pure a string and i have to work on a given string only

Answer 1

Ok, no DOM, here is the regex:

/content\\=\\"([A-Za-z0-9 _]*)\\"/

And if for some reason there are other content attributes in the string that you don't want to match you can just be more specific:

/meta\\sproperty\\=\\"og\\:title\\"\\scontent\\=\\"([A-Za-z0-9 _]*)\\"/

This is a very helpful site where it is easy to test regexes of different types.

Answer 2

While it is possible, and generally suggested, to get attributes without using regex, I've created one that will attempt to pull all attributes from an html tag string.

var string = '<a href="next.html" title="\'Next\' >>" target="_self" onclick="var target=\'_blank\'; window.open(this.href + \"?test=1\", target); return false;">Next ></a>';
var regex = new RegExp('[\\s\\r\\t\\n]*([a-z0-9\\-_]+)[\\s\\r\\t\\n]*=[\\s\\r\\t\\n]*([\'"])((?:\\\\\\2|(?!\\2).)*)\\2', 'ig');
var attributes = {};
while ((match = regex.exec(string))) {
    attributes[match[1]] = match[3];
}

Outputs:

{
    href: "next.html",
    onclick: "var target='_blank'; window.open(this.href + \"?test=1\", target); return false;",
    target: "_self",
    title: "'Next' >>"
}

It works by expecting an equals sign that follows letters, numbers, underscores and hyphens, and is also followed by either a quotation mark or apostrophe. It'll use the match for the apostrophe/quotation mark to determine when the attribute ends, in case the attribute also contains other apostrophe or quotation marks.

I've tried to account for possible line breaks and spacing, however, I've still found some edge cases where it will have issues where the attribute contains an equals signs.

EDIT

Adjusted the above code to double escape whitespace and lines, as well as fix issues with nested equals signs = and escaped quotes \\" and apostrophes \\' .

Answer 3

You can get title tag text and meta tag attributes simply using this Jquery.

var title = $('title').text();
var meta_property = $('meta').attr('property');