For every programmer, coding HTML & CSS is a very boring thing.
For example, writing an html tag <div> with id "div1" and class "col-md-3", you must write an html file like this:
<div id = "div1" class = "col3">
...
</div>
Too much unnecessary coding!!!
For convenience, some Web programmer develop a vim plugin -- Emmet. By this tool, the programmer just need code "div#div1.col3" and then Emmet would transform it to "<div id = "div1" class = "col3"></div>". It is very coollllll! Now you task is to write a program to perform this transformation.
Here are more details about you task:
1.Handle multilevel tag.
"div>p>span" means there are 3 tags and tag <p> is in the tag "div", tag <span> is in the tag "p".
So, the right answer is "<div><p><span></span></p></div>"
2. Every tag may have zero or one id and any amount of classes.
A string (only consisting of letters and digits) after '#' is an id name.
A string (only consisting of letters and digits) after '.' is a class name.
If a tag has id and classes at the same time, you must output the id first.
If a tag has more than one class, you must output them by the order according to the input.
For example
"div.aa#bb.cc.ee>p#g>span.d" =>
<div id="bb" class="aa cc ee">
<p id="g">
<span class="d"></span>
</p>
</div>"
3.Handle parentheses.
Use parentheses to deal with sibling relation among tags!
For example
<div id="bb" class="aa cc ee">
<p id="g1"><span class="d1"></span></p>
<p id="g2"><span class="d2"></span></p>
<p id="g3"><span class="d3"></span></p>
</div>
can be obtained by "div.aa#bb.cc.ee>(p#g1>span.d1)(p#g2>span.d2)(p#g3>span.d3)"
If the input string contains parentheses, the rightmost ‘)’ will be the last character of this string.
4.Handle symbol ‘*’
At the end of a tag, you may see a suffix "*%d". It indicates that this tag would be repeated "%d" times.
For example
ul#id1>li.classA*3>p*2 =>
<ul id="id1">
<li class="classA">
<p></p>
<p></p>
</li>
<li class="classA">
<p></p>
<p></p>
</li>
<li class="classA">
<p></p>
<p></p>
</li>
</ul>