How do block parsers work?!

[Hobart2967]

I am getting desperate over here. Trying to write a block parser for this kind of thing:

<<<<
====Tab1 Title
My content of tab 1
====Tab2 Title
My content of tab2
====Tab3 Title
My content of tab3
====Tab4 Title
My content of tab4
>>>>

Should be converted into:

<div class="tab-control">
   <div class="tab-titles">
      <div>Tab1 Title</div>
      <div>Tab2 Title</div>
      <div>Tab3 Title</div>
      <div>Tab4 Title</div>
   </div>
   <div class="tab-content" attr-index="1">
      My content of tab 1
   </div>
   <div class="tab-content" attr-index="2">
      My content of tab 2
   </div>
   <div class="tab-content" attr-index="3">
      My content of tab 3
   </div>
   <div class="tab-content" attr-index="4">
      My content of tab 4
   </div>
</div>

Tried copying fences block parser and modify it to my needs. But I can't even find out what it does. For me it looks like

voodoo voodoo voodoo voodoo voodoo

I totally miss regex and many more... There's not even a starting tag recognizable. How does this work? Appreciate any help...