Example

HTML Fragment

Nested HTML-like markup.

Open in Studio →← All examples

Parse a small nested markup fragment.

What it shows

Attribute exposes its name and value.
Node has comment, text, and element forms.
Node::Element contains Node[] children for nested markup.
#{=tagName} requires the closing tag to match the opening tag.

Try adding a nested tag or another attribute.

Specs

spec.yml

$flags: 'FLEXIBLE_WHITESPACE'

MarkupName: '[A-Za-z][A-Za-z0-9-]*'

Attribute:
  $types:
    AttributeValue: '.*?'
  $fields:
    name: MarkupName
    value: AttributeValue
  $patterns: '#{name}=\"#{value}\"'

Node:
  Comment: '<!--.*?-->'
  Text: '(?<=>)${!Node}[^>\s][^>]*(?=<)'
  Element:
    $fields:
      tagName: MarkupName
      attributes: Attribute[]
      children: Node[]
    $patterns:
      - '<#{tagName}( #{attributes})*>(\s*#{children}\s*)*</#{=tagName}>'
      - '<#{tagName}( #{attributes})*/>'

Sample

Sample input

<div class="container">
  <div class="content" id="content-panel" height="200px">
    <h1 id="main-title">Hello, World!</h1>
    <br/>
   </div>
   <!-- <div> Commented Node </div> -->
</div>

Result

::Node::Element<div class="container"> <div class="content" id="content-panel" height="200px"> <h1 id="main-title">Hello, World!</h1…

tagName:MarkupNamediv
attributes:Attribute[]class="container"
- [0]:Attributeclass="container"
  - name:MarkupNameclass
  - value:AttributeValuecontainer
children:Node[]<div class="content" id="content-panel" height="200px"> <h1 id="main-title">Hello, World!</h1> <br/> </div>

[
  {
    "type": "Node::Element",
    "text": "<div class=\"container\">\n  <div class=\"content\" id=\"content-panel\" height=\"200px\">\n    <h1 id=\"main-title\">Hello, World!</h1>\n    <br/>\n   </div>\n   <!-- <div> Commented Node </div> -->\n</div>",
    "start": 0,
    "end": 191,
    "fields": [
      {
        "type": "MarkupName",
        "field": "tagName",
        "text": "div",
        "start": 1,
        "end": 4
      },
      {
        "type": "Attribute[]",
        "field": "attributes",
        "text": "class=\"container\"",
        "start": 5,
        "end": 22,
        "items": [
          {
            "type": "Attribute",
            "text": "class=\"container\"",
            "start": 5,
            "end": 22,
            "fields": [
              {
                "type": "MarkupName",
                "field": "name",
                "text": "class",
                "start": 5,
                "end": 10
              },
              {
                "type": "AttributeValue",
                "field": "value",
                "text": "container",
                "start": 12,
                "end": 21
              }
            ]
          }
        ]
      },
      {
        "type": "Node[]",
        "field": "children",
        "text": "<div class=\"content\" id=\"content-panel\" height=\"200px\">\n    <h1 id=\"main-title\">Hello, World!</h1>\n    <br/>\n   </div>\n   <!-- <div> Commented Node </div> -->",
        "start": 26,
        "end": 184,
        "items": [
          {
            "type": "Node::Element",
            "text": "<div class=\"content\" id=\"content-panel\" height=\"200px\">\n    <h1 id=\"main-title\">Hello, World!</h1>\n    <br/>\n   </div>",
            "start": 26,
            "end": 144,
            "fields": [
              {
                "type": "MarkupName",
                "field": "tagName",
                "text": "div",
                "start": 27,
                "end": 30
              },
              {
                "type": "Attribute[]",
                "field": "attributes",
                "text": "class=\"content\" id=\"content-panel\" height=\"200px\"",
                "start": 31,
                "end": 80,
                "items": [
                  {
                    "type": "Attribute",
                    "text": "class=\"content\"",
                    "start": 31,
                    "end": 46,
                    "fields": [
                      {
                        "type": "MarkupName",
                        "field": "name",
                        "text": "class",
                        "start": 31,
                        "end": 36
                      },
                      {
                        "type": "AttributeValue",
                        "field": "value",
                        "text": "content",
                        "start": 38,
                        "end": 45
                      }
                    ]
                  },
                  {
                    "type": "Attribute",
                    "text": "id=\"content-panel\"",
                    "start": 47,
                    "end": 65,
                    "fields": [
                      {
                        "type": "MarkupName",
                        "field": "name",
                        "text": "id",
                        "start": 47,
                        "end": 49
                      },
                      {
                        "type": "AttributeValue",
                        "field": "value",
                        "text": "content-panel",
                        "start": 51,
                        "end": 64
                      }
                    ]
                  },
                  {
                    "type": "Attribute",
                    "text": "height=\"200px\"",
                    "start": 66,
                    "end": 80,
                    "fields": [
                      {
                        "type": "MarkupName",
                        "field": "name",
                        "text": "height",
                        "start": 66,
                        "end": 72
                      },
                      {
                        "type": "AttributeValue",
                        "field": "value",
                        "text": "200px",
                        "start": 74,
                        "end": 79
                      }
                    ]
                  }
                ]
              },
              {
                "type": "Node[]",
                "field": "children",
                "text": "<h1 id=\"main-title\">Hello, World!</h1>\n    <br/>",
                "start": 86,
                "end": 134,
                "items": [
                  {
                    "type": "Node::Element",
                    "text": "<h1 id=\"main-title\">Hello, World!</h1>",
                    "start": 86,
                    "end": 124,
                    "fields": [
                      {
                        "type": "MarkupName",
                        "field": "tagName",
                        "text": "h1",
                        "start": 87,
                        "end": 89
                      },
                      {
                        "type": "Attribute[]",
                        "field": "attributes",
                        "text": "id=\"main-title\"",
                        "start": 90,
                        "end": 105,
                        "items": [
                          {
                            "type": "Attribute",
                            "text": "id=\"main-title\"",
                            "start": 90,
                            "end": 105,
                            "fields": [
                              {
                                "type": "MarkupName",
                                "field": "name",
                                "text": "id",
                                "start": 90,
                                "end": 92
                              },
                              {
                                "type": "AttributeValue",
                                "field": "value",
                                "text": "main-title",
                                "start": 94,
                                "end": 104
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "type": "Node[]",
                        "field": "children",
                        "text": "Hello, World!",
                        "start": 106,
                        "end": 119,
                        "items": [
                          {
                            "type": "Node::Text",
                            "text": "Hello, World!",
                            "start": 106,
                            "end": 119
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "type": "Node::Element",
                    "text": "<br/>",
                    "start": 129,
                    "end": 134,
                    "fields": [
                      {
                        "type": "MarkupName",
                        "field": "tagName",
                        "text": "br",
                        "start": 130,
                        "end": 132
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "Node::Comment",
            "text": "<!-- <div> Commented Node </div> -->",
            "start": 148,
            "end": 184
          }
        ]
      }
    ]
  }
]

Try it liveOpen HTML Fragment in StudioTweak the spec, paste your own input, and see the parse tree update in real time.

Or browse other examples →