HTML Parser - Convert HTML to Jinja2 and Php components

Hello Coders,

I'm happy to announce that our HTML parser hit an important milestone: now we are able to covert flat HTML to 4 template engines: Jinja2, core Php, Blade (Laravel) and PUG. The video mentioned in this article presents the POC for Php and Jinja2 translation, DOM editing and extraction.

Using this tool, we are able to integrate a new design in applications coded in different technologies. The manual work of extracting the components, remove the hard coded texts, variables injection into each component, is automatized by this HTML parser.

Your company still integrate manually a new design? Access the support page and talk with us.  

What is an HTML Parser

Note for newcomers - according to Wikipedia, Parsing or syntactic analysis is the process of analyzing a string of symbols, either in natural language or in computer languages, according to the rules of a formal grammar. The meaning of HTML parsing applied here is basically, crawling the HTML code and extracting, processing relevant information like head title, page assets, main sections.


HTML Parser - video transcript

  • The HTML theme is loaded into the tool
  • The Index.html is selected
  • We are traversing the DOM, select components
  • The attributes for some elements (anchors, span) are edited.
  • The top component is extracted without any change
  • The top component is edited and extracted again using the HTML translation
  • The top component is extracted for PHP

HTML Parser - code samples

Unprocessed HTML

<!-- BEGIN AppSeed Component -->
<div class="page-header" data-parallax="true" style="background-image: url('/assets/img/daniel-olahh.jpg');">
 <div class="filter">
 </div>
 <div class="container">
  <div class="motto text-center">
   <h1>
    <a href="https://github.com/app-generator/html-parser">
     HTML Parser
    </a>
   </h1>
   <h3>
    Landing Page Sample, used for LIVE HTML parsing
   </h3>
   <br/>
   <a class="btn btn-outline-neutral btn-round" href="https://blog.appseed.us/html-parser-convert-html-to-pug-jinja2-blade/">
    <i class="fa fa-rocket">
    </i>
    Read More
   </a>
  </div>
 </div>
</div>
<!-- END AppSeed Component -->

Php component

```Php
<!-- BEGIN AppSeed Component -->
<div class="page-header" data-parallax="true" style="background-image: url(/assets/img/daniel-olahh.jpg')">
 <div class="filter">
 </div>
 <div class="container">
  <div class="motto text-center">
   <h1>
    <a href="https://appseed.us">
     <?php echo $var_1?>
    </a>
   </h1>
   <h3>
    <?php echo $var_2?>
   </h3>
   <br/>
   <a class="btn btn-outline-neutral btn-round" href="https://blog.appseed.us/html-parser-convert-html-to-pug-jinja2-blade/">
    <i class="fa fa-rocket">
    </i>
    Read More
   </a>
  </div>
 </div>
</div>
<!-- END AppSeed Component -->
```

Json file - that store the original hard coded texts

{
    "var_1": "Updaed TXTX",
    "var_2": "Landing Page Sample, used for LIVE HTML parsing"
}

Resources


Btw, my nick name is Sm0ke, and I'm writing a lot on Dev.to

Adi Chirilov aka Sm0ke - Founder AppSeed.

Show Comments

Get the latest posts delivered right to your inbox.