FixCode

Fix the CSS Selector Parser

Medium

Challenge 14 of 20

Fix the CSS Selector Parser

Medium

This function is supposed to parse a CSS selector into its components, but it doesn't handle certain selectors correctly. Fix the implementation.

Challenge 14 of 20

50 XP

Community Solutions

ParsingRegular ExpressionsCSSJavaScript

Exit Challenge

Test Cases

0/3 passing

Test Case #1

Input: parseSelector('div#main.container.large')

Expected: { id: 'main', classes: ['container', 'large'], tag: 'div' }

Run tests to see results

Test Case #2

Input: parseSelector('#sidebar')

Expected: { id: 'sidebar', classes: [], tag: null }

Run tests to see results

Test Case #3

Input: parseSelector('.btn.btn-primary')

Expected: { id: null, classes: ['btn', 'btn-primary'], tag: null }

Run tests to see results

solution.js

<span class="token keyword">function</span> parseSelector(selector) {
  <span class="token keyword">const</span> result = {
    id: <span class="token boolean">null</span>,
    classes: [],
    tag: <span class="token boolean">null</span>
  };
  
  <span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>// Extract ID</span>
  <span class="token keyword">const</span> idMatch = selector.match(/#([a-zA-Z0-9_-]+)/);
  <span class="token keyword">if</span> (idMatch) {
    result.id = idMatch[<span <span class="token keyword">class</span>="token number">1</span>];
  }
  
  <span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>// Extract classes</span>
  <span class="token keyword">const</span> classMatches = selector.match(/\.([a-zA-Z0-9_-]+)/g);
  <span class="token keyword">if</span> (classMatches) {
    result.classes = classMatches.map(match =>; match.substring(<span <span class="token keyword">class</span>="token number">1</span>));
  }
  
  <span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>// Extract tag</span>
  <span class="token keyword">const</span> tagMatch = selector.match(/^([a-zA-Z0-<span <span class="token keyword">class</span>="token number">9</span>]+)/);
  <span class="token keyword">if</span> (tagMatch) {
    result.tag = tagMatch[<span <span class="token keyword">class</span>="token number">1</span>];
  }
  
  <span class="token keyword">return</span> result;
}

function parseSelector(selector) {
  const result = {
    id: null,
    classes: [],
    tag: null
  };
  
  // Extract ID
  const idMatch = selector.match(/#([a-zA-Z0-9_-]+)/);
  if (idMatch) {
    result.id = idMatch[1];
  }
  
  // Extract classes
  const classMatches = selector.match(/\.([a-zA-Z0-9_-]+)/g);
  if (classMatches) {
    result.classes = classMatches.map(match => match.substring(1));
  }
  
  // Extract tag
  const tagMatch = selector.match(/^([a-zA-Z0-9]+)/);
  if (tagMatch) {
    result.tag = tagMatch[1];
  }
  
  return result;
}

Console

Run your code to see output here

Previous ChallengeNext Challenge

Exit