cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
               <div id="css-table">
  <div id="col-1">
  <ul>
    <li><a href="#col-1-tab-1">Example 3</a></li>
  </ul>
  <div id="col-1-tab-1">
  <article>
   <h1>hexidecimal number</h1>
   <p>
    <b>pattern:</b><br>
    <textarea class="input" id="apgexp-def"></textarea>
   </p>
   <p>
    <b>input string:</b><br>
    <textarea class="input" id="input-data"></textarea>
   </p>
    <p>
    <button id="tryit" class="tryit-button">try it</button>
   </p>
    <p>
    Here is another simple example, but this time the pattern area is enabled.
    You can experiment with it and try out your ABNF skills.
    Don't be discouraged if you make mistakes.
    This example is designed to let you see what happens when you do make them.
   </p>
    <p>
    In fact, the buttons below give you an opportumity to understand what types of mistakes can be made
    and how <b>apg-exp</b> reports them to you.
    </p>
    <p>
    <button id="invalid" class="tryit-button">validation errors</button><br>
    The first thing that <b>apg-exp</b> does is check the input and make sure it doesn't
    have any invalid characters. Only ASCII printing characters plus TAB(\t), LF(\n), CR(\r) are allowed.
    Don't forget the line ending on the last line. This is a very common mistake. 
    </p>
    <p>
    <button id="syntax" class="tryit-button">syntax errors</button><br>
    Next it looks for syntax errors. For example, a rule name that begins with a number
    or an unmatched open parenthesis.
    </p>
    <p>
    <button id="semantic" class="tryit-button">semantic errors</button><br>
    Semantic errors can occur after the syntax is OK but things still don't quite all add up.
    For example, a rule that is used but not defined or a rule that is defined twice.
    </p>
    <p>
    <button id="attribute" class="tryit-button">attributes errors</button><br>
    Even after all of that there are still some things that can go wrong.
    Without getting into the theoretical details of parsing:
    <ul>
    <li>
    left recursion - a rule can't refer to itself as the left-most term in the rule definition:<br>
    <code>R = R "y"/"x"</code>
    </li>
    <li>
    infinite - a rule must always have at least one terminal alternate. For example, the rule<br>
    <code>R = "y" R</code><br>
    never ends. It can only match an infinite string.
    </li>
    <li>
    cyclic - a rule such as<br>
    <code>R = R</code><br>
    is valid syntactically and semantically but obviously defines nothing.
    </li>
    </ul>
    </p>
   </p>
   <div class="discussion">
   </div>
  </article>
  </div>
  </div>
  <div id="col-2">
  <ul>
    <li><a href="#col-2-tab-1">apg-exp</a></li>
  </ul>
  <div id="col-2-tab-1">
  <article>
   <div id="apgexp-result"></div>
  </article>
  </div>
  </div>
 </div>

            
          
!
            
              /* Pen-specific styles */
* {
	box-sizing: border-box;
}

body {
	color: #000;
	font-size: .8rem;
	line-height: 150%;
}

h1 {
	font-size: 1.75rem;
	margin: 0 0 0.75rem 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}

h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}

article {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}

b {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}

i {
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
}

textarea {
	width: 100%;
}

button {
	cursor: pointer;
	cursor: hand;
}

p.title {
	margin: 0px 0px 3px 0px;
}

a.link {
	color: #4284B0;
}

a.link:visited {
	color: #9c4be7;
}

textarea.input {
	font-size: .9rem;
	font-family: monospace;
}

/* Pattern styles */
#css-table {
	display: table;
}

#col-1 {
	display: table-cell;
	width: 40%;
	border: 1px solid #4284B0;
}

#col-2 {
	display: table-cell;
	width: 60%;
	border-width: 1px 0px;
	border-style: solid;
	border-color: #4284B0;
}

button {
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
	cursor: hand;
	margin: 0px 0px 2px 0px;
}

button.tryit-button {
  width: 10rem;
}


#apgexp-def, #input-data {
	width: 95%;
	font-size: .9rem;
	font-family: monospace;
}

#apgexp-def {
	height: 15em;
}
            
          
!
            
              var strings = {};
var $result, $abnf, $data;

// ApgExp instantiation and execution
var execute = function() {
  var exp, result, output;
  try {
    exp = new ApgExp($abnf.val());
    result = exp.exec($data.val());
    if (result) {
      output = result.toHtml();
    } else {
      output = "<pre>result: null\n</pre>";
    }
  } catch (e) {
    if (e.name === "ApgExpError") {
      output = e.toHtml();
    } else if(e instanceof Error){
      output = "<pre>Error thrown:\n";
      output += e.message;
      output += "\n</pre>";
    }else{
      output = "<pre>unrecognized exception thrown:\n";
      output += e;
      output += "\n</pre>";
    }
  }
  $result.html(output);
}
var tryit = function(){
  execute();
}
var invalid = function(){
  $abnf.val(strings.invalid);
  execute();
}
var syntax = function(){
  $abnf.val(strings.syntax);
  execute();
}
var semantic = function(){
  $abnf.val(strings.semantic);
  execute();
}
var attribute = function(){
  $abnf.val(strings.attribute);
  execute();
}
$(document).ready(function() {
  
  // SABNF pattern syntax
  strings.hex  = 'hexidecimal = %^ %d92.120 (4hex / 2hex / hex) %$ ; \\x00 or \\x0000 or \\x00000000\n';
  strings.hex += 'hex         = 2digit   ; 2 hex digits\n';
  strings.hex += 'digit       = %d48-57  ;    0-9\n';
  strings.hex += '            / %d65-70  ; or A-F\n';
  strings.hex += '            / %d97-102 ; or a-f\n';

  // SABNF pattern syntax with invalid charactes
  strings.invalid  = 'hexidecimal = %^ %d92.120 \x80 (4hex / 2hex / hex) %$\n';
  strings.invalid += 'hex         = 2digit   ; 2 hex digits\n';
  strings.invalid += 'digit       = %d48-57  ;    0-9\n';
  strings.invalid += '            / \xab %d65-70  ; or A-F\n';
  strings.invalid += '            / %d97-102 ; or a-f';

  // SABNF pattern syntax with syntax errors
  strings.syntax  = 'hexidecimal = %^ %d92.120 (4hex / 2hex / hex  %$\n';
  strings.syntax += '1hex         = 2digit   ; 2 hex digits\n';
  strings.syntax += 'digit       = #d48-57  ;    0-9\n';
  strings.syntax += '            / %d65-70  ; or A-F\n';
  strings.syntax += '            / %d97-102 ; or a-f\n';

  // SABNF pattern syntax with semantic errors
  strings.semantic  = 'hexidecimal = %^ %d92.120 (4misspelled-hex / 2hex / hex) %$\n';
  strings.semantic += 'hex         = 2digit   ; 2 hex digits\n';
  strings.semantic += 'digit       = %d57-48  ;    0-9\n';
  strings.semantic += 'digit       = %d48-59  ;    0-9\n';
  strings.semantic += '            / %d65-70  ; or A-F\n';
  strings.semantic += '            / %d97-102 ; or a-f\n';

  // SABNF pattern syntax with attribute errors
  strings.attribute  = '';
  strings.attribute += '; not a hexidecimal number, obviously\n';
  strings.attribute += '; demonstrates attribute errors\n';
  strings.attribute += 'R      = R "y" / "x"\n';
  strings.attribute += 'inf    = "y" inf\n';
  strings.attribute += 'cyclic = cyclic\n';
  
  // initial input string value for the hexidecimal number
  strings.input = "\\x00FF";
  
  // jQuery values
  $result = $("#apgexp-result");
  $abnf = $("#apgexp-def");
  $data = $("#input-data");

  // page setup
  $abnf.val(strings.hex);
  $data.val(strings.input);
  $("#tryit").click(execute);
  $("#invalid").click(invalid);
  $("#syntax").click(syntax);
  $("#semantic").click(semantic);
  $("#attribute").click(attribute);
  $("#col-1").tabs();
  $("#col-2").tabs();
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console