Problem : 345 - Emmet

HTML & CSS是枯燥乏味的東西。


例如，當我們要宣告一個tag <div>，他的id要是div1並且他的class要是col，你必須這樣寫：

<div id = "div1" class = "col3">
...
</div>

無趣 (O____O)/。

為了方便，我們開發了一個editor的插件-Emmet。有了這個插件，我們可以寫 div#div1.col3 就做到上面的要求，現在我們要你模擬這個插件。

以下為插件的所有功能：

1. 多層級tag
div>p>span 代表span在p裡，且p在div裡。
所以展開後會是：<div><p><span></span></p></div>

2. 每個tag可能有一個編號(id)和多種class
在"#"後的字串代表id，在"."後的字串代表class。
這邊的字串都只包含小寫英文字母和數字。
當一個tag同時有id和class的時候，你必須先輸出id。
當一個tag同時有多個class的時候，你必須依照輸入的順序輸出。
例如：
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. 處理括號
同一層的tags要用括號分開。
例如：
div.aa#bb.cc.ee>(p#g1>span.d1)(p#g2>span.d2)(p#g3>span.d3) 轉換成
<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>
我們保證輸入中如果包含“)”，那輸入資料的最後一個字元一定是")"。

4. 處理"*"
在每個tag後面都有可能接上"*%d"，這代表這個tag要被重複%d次。
例如：
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>

上方轉換後的換行是為了方便檢視，實際作答時輸出請依照範測格式，一筆測資一行。