Parser

by Emanuele del Grande

HTML

<div class="logo">
    <span>JS</span> <span>Parser</span>
    <div>JS language parser</div>
</div>

<p>Snippet of code to test the parser:</p>

<pre><code>function getValue(index) {
    var body = document.getElementsByTagName('body')[0];
    return index ? body.innerText : 2;
}
</code></pre>

<p>The first action is the tokenization. It is performed over two levels: the first to get primary tokens, the second for secondary tokens, for their order of priority and complexity.</p>

CSS

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
  --font-color: #444;
  --font-family: Inter, Roboto, Arial, Helvetica;
  --font-size: 14px;
  --font-weight: 300;
  --letter-spacing: -0.5px;
  --main-color: #607f8b; /* #4ae */
  --inner-border-width: 1px;
  --border-color: #ddd;
  --v-padding: 10px;
}


/* GENERIC STYLE */
*, *:before, *:after { margin; 0; padding: 0; box-sizing: border-box; outline: none; }
html, body {
    font: 14px var(--font-family); color: var(--font-color); line-height: 1.4em;
    font-weight: var(--font-weight); letter-spacing: var(--letter-spacing);
}
.logo { font: 42px var(--font-family); margin: 0; padding: 10px 0 0 20px; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.logo span:first-child {
    position: relative; top: 0; left: 0; padding: 0 13px 0 10px; color: var(--main-color); background: var(--main-color); color: #fff;
    clip-path: ellipse(100% 125% at 100% 50%); z-index: 1;
}
.logo span:nth-child(2) { position: relative;top: 0; left: 0; margin: 0 0 0 -13px; background: transparent; z-index: 2; }

.logo div { font: 12px var(--font-family); padding: 0 0 0 70px; letter-spacing: -0.5px; }

/* SPECIFIC STYLES */
pre { border: 1px solid #ddd; padding: 7px; background: #f7f7f7; }

JavaScript

var code = document.querySelectorAll('pre code')[0].innerHTML;

function Parser() {
	var self = this;
    
    this.init = function() {
    	self.tokens = [];
    };
    this.setCode = function(code) {
    	self.code = code;
    };
    this.parse = function() {
    	self.tokenizeMain(self.code);
        self.tokenizeSecondary();
    }
};

var parser = new Parser();
parser.setCode(code);