title: Trying to understand javascript regexp result
body: <p>I want to parse strings using javascript with two alternative formats:</p>
  
  <pre><code>id#state#{font name, font size, "text"}  
  // e.g. button1#hover#{arial.ttf, 20, "Ok"}
  </code></pre>
  
  <p>or</p>
  
  <pre><code>id#state#text                            
  // e.g. button1#hover#Ok
  </code></pre>
  
  <p>where in the second variant, a default font and size is being assumed.</p>
  
  <p>Before you read further, I have to point out that I control the format, so  I'd love to hear about any other format that is more RegExp Friendly&trade;. That being said, the second alternative is needed for historical reasons, as is the <code>id#state#</code>-part. In other words, the flexibility resides in the <code>{font name, font size, "text"}</code>-part. </p>
  
  <p>Furthermore, I'd like to use RegExp as far as possible. Yes, the RegExp I suggest below is pretty hairy, but for my case this is not only a possible solution to the problem at hand but also a matter of learning more about RegExp itself.</p>
  
  <p>My current attempt at grouping the three or alternatively five information elements in the two formats is as follows.</p>
  
  <pre><code>var pat = /^(\w*)#(\w*)#
            (?:(?:\{([\w\.]*),\s*([0-9\.]*),\s*"([\w\s]*)"\})|([\w\s]*))$/;
  
  var source1 = "button1#hover#{arial.ttf, 20, \"Ok\"}";
  var source2 = "button1#hover#Ok";
  
  var result1 = source1.match ( pat );
  var result2 = source2.match ( pat );
  
  alert ( "Source1: " + result1.length + " Source2: " + result2.length );
  </code></pre>
  
  <p>When I tested this expression at <a href="http://www.regular-expressions.info/javascriptexample.html" rel="nofollow">http://www.regular-expressions.info/javascriptexample.html</a>, I got:</p>
  
  <pre><code>result1 = [ button1#hover#{arial.ttf, 20, "Ok"}, button1, hover, arial.ttf, 
              20, Ok, undefined ]
  </code></pre>
  
  <p>and </p>
  
  <pre><code>result2 = [ button1#hover#Ok, button1, hover, undefined, 
              undefined, undefined, Ok ]
  </code></pre>
  
  <p>Here's how I break down the RegExp:</p>
  
  <pre><code>^(\w*)#(\w*)#(?:(?:\{([\w\.]*),\s*([0-9\.]*),\s*"([\w\s]*)"\})|([\w\s]*))$
  
  ^                 # anchor to beginning of string
  (\w*)             # capture required id
  #                 # match hash sign separator
  (\w*)             # capture required state
  #                 # match hash sign separator
                    # capture text structure with optional part:
  (?:(?:\{([\w\.]*),\s*([0-9\.]*),\s*"([\w\s]*)"\})|([\w\s]*))  
  $                 # anchor to end of string
  </code></pre>
  
  <p>The text structure capture is the dodgiest part, I guess. I break it down as follows:</p>
  
  <pre><code>(?:                  # match all of what follows but don't capture
      (?:\{            # match left curly bracket but don't capture (non-capturing group)
            ([\w\.]*)  # capture font name (with possible punctuation in font file name)
            ,\s*       # match comma and zero or more whitespaces
            ([0-9\.]*) # capture font size (with possible decimal part)
            ,\s*"      # match comma, zero or more whitespaces, and a quotation char
            ([\w\s]*)  # capture text including whitespaces
      "\})             # match quotation char and right curly bracket (and close non-capturing group)
      |                # alternation operator
      ([\w\s]*)        # capture optional group to match the second format variant
  )                    # close outer non-capturing group
  </code></pre>
  
  <p>My question is two fold:</p>
  
  <p>1) How can I avoid the trailing undefined match in the result1 case?</p>
  
  <p>2) How can I avoid the three undefined matches in the middle of the result2 case?</p>
  
  <p>Bonus question:</p>
  
  <p>Did I get the break down right? (I guess there is something amiss, since the RegExp isn't working entirely as expected.)</p>
  
  <p>Thanks! :)</p>