Parse an image srcset attribute
Responsive images are configured through a single comma-separated string, and any tool that audits or rewrites them — an image CDN helper, a lint rule, a Markdown pipeline — starts by parsing it.
Implement parseSrcset(srcset) returning an array of { url, width, density } in input order. Assume no candidate URL contains a comma, so you can split the string on ,. Trim each candidate and skip empty ones, then split on whitespace: the first token is the URL and an optional second token is the descriptor.
A descriptor of digits followed by w (such as 800w) sets width to that integer and density to null. A descriptor of a number followed by x (such as 2x or 1.5x) sets density to that number and width to null. A candidate with no descriptor — or with a descriptor you do not recognise, which is ignored — gets width: null and density: 1, matching the browser's default of 1x.
An empty or missing input returns an empty array.
Arguments
srcsetstring- The raw
srcsetattribute value. An empty or missing input returns[].
Returns
Array<{ url: string; width: number | null; density: number | null }> — The candidates in input order. A width descriptor fills width and leaves density null; a density descriptor fills density and leaves width null.
Examples
parseSrcset("a-480.jpg 480w, a-800.jpg 800w");
// => [
// { url: "a-480.jpg", width: 480, density: null },
// { url: "a-800.jpg", width: 800, density: null }
// ]Width descriptors — the common responsive-images pattern.
parseSrcset("a.png, [email protected] 2x");
// => [
// { url: "a.png", width: null, density: 1 },
// { url: "[email protected]", width: null, density: 2 }
// ]A bare candidate defaults to density 1, matching the browser.
parseSrcset("a.png 1.5x");
// => [{ url: "a.png", width: null, density: 1.5 }]Density descriptors accept decimals.
What it has to do
- Return an array of
{ url, width, density }objects in input order. - Split candidates on
,and separate the URL from its descriptor on whitespace. - Set
widthfrom aNwdescriptor and leavedensityasnull. - Set
densityfrom aNxdescriptor, allowing decimals, and leavewidthasnull. - Default to
width: null, density: 1when there is no recognised descriptor, and return[]for empty input.
Notes
- Width and density descriptors should not be mixed inside the same
srcsetin real HTML. Browsers tolerate the mix but the picked candidate is unspecified; this parser just records what was written. - Real-world
srcsetcan contain URLs with commas (data URLs, signed CDN tokens). A spec-exact parser needs to count parentheses rather than split on commas naively; this problem is deliberately scoped to URLs without them.
Stuck? The javascript course covers everything this challenge needs.
- 1.parses width descriptors
- 2.defaults a bare candidate to density 1
- 3.accepts a fractional density
- 4.trims whitespace and skips empty candidates
- 5.returns an empty array for an empty string
These assertions run in your browser the moment you hit Run. Pass all of them to claim the XP.
Discussion
Sign in to postNo comments yet. Be the first to say something.