Regex: group that must exist but it's unknown at advance where it will be

Question

I need to get href argument value, but only for those <link> tags which has type='image/x-icon' attribute (by other words, favicon tags):

// Below ones must be parsed
<link rel="icon" type="image/x-icon" href="#" />
<link rel="shortcut icon" type="image/x-icon" href="#" />

// Below ones must be ignored
<link rel="stylesheet" href="styles.html">
<link rel="search" href="search.html">
<link rel="help" href="help.html">

The problem is type="image/x-icon" could be before href="#" or after it, but exactly one of these cases. How I can express it in regular expression from JavaScript?

Regex fiddle with my try

I'd use an HTML parser or DOM traversal. [Regex just can't do HTML parsing](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454). Are you using Node or browser JS? — ggorlen, Aug 20 '19 at 01:59
Check out an HTML parser like [Cheerio](https://cheerio.js.org/) instead of regex. — ggorlen, Aug 20 '19 at 06:38
@ggorlen, it will save a lot of time... Thank you for the recommendation! — Takeshi Tokugawa YD, Aug 20 '19 at 06:46

score 3 · Answer 1 · answered Aug 20 '19 at 01:58

You can use DOMParser API instead

let str = `
<link rel="icon" type="image/x-icon" href="#" />
<link rel="shortcut icon" type="image/x-icon" href="#" />


<link rel="stylesheet" href="styles.html">
<link rel="search" href="search.html">
<link rel="help" href="help.html">`

let parser = new DOMParser()
let parsed = parser.parseFromString(str,"text/html")

let links = parsed.getElementsByTagName('link')

console.log(Object.values(links).filter(val=> val.type === 'image/x-icon'))

Just say no to using regex for HTML parsing! +1 – Nick Aug 20 '19 at 02:42 — Nick, Aug 20 '19 at 02:42

score 1 · Accepted Answer · answered Aug 20 '19 at 02:08

If you need to do it with a single regex, it's possible to use a lookahead assertion to verify that the link tag contains type="image/x-icon" before going on to capture the href value.

Something like:

/<link (?=[^>]*type="image\/x-icon")[^>]* href="([^"]+)" [^>]*>/

score 0 · Answer 3 · answered Aug 20 '19 at 02:10

You can use an or | in your regex like so:

/<link (?:(?:.* type="image\/x-icon" .* href="([^"]+)" .*)|(?:.* href="([^\"]+)" .* type="image\/x-icon" .*))\/>/

In other words, you have a link tag with either the type attribute followed by the href, or the href attribute followed by the type.

You may need to check the resultant groups and get the one that has a defined value.

Regex: group that must exist but it's unknown at advance where it will be

3 Answers3