CODE-用jQuery翻修HTML內容
10 |
處理一個案子,同事給了我一個HTML的樣版(其他ASPX產生的),我要借它的排版用在其他地方,數字及文字欄位的部分要轉成[$FieldName$]的格式,去掉不必要的id以及style設定,範例如下:
<!-- 原始網頁 -->
<tr id="OrderUserControl1_tr_ORDER_PRZ" style="DISPLAY:block;">
<td class="title">委託價格</td>
<td><span id="OrderUserControl1_lab_ORDER_PRZ">123.45</span></td>
</tr>
<tr id="OrderUserControl1_tr_TRADE_CRNCY" style="DISPLAY:block;">
<td class="title">交易幣別</td>
<td><span id="OrderUserControl1_lab_TRADE_CRNCY">USD</span></td>
</tr>
<tr id="OrderUserControl1_tr_CLEAR_CRNCY" style="DISPLAY:block;">
<td class="title">交割幣別</td>
<td><span id="OrderUserControl1_lab_CLEAR_CRNCY">USD</span></td>
</tr>
<!-- 想要翻成以下的樣版 -->
<TR>
<TD class=title>委託價格</TD>
<TD>[$ORDER_PRZ$]</TD></TR>
<TR>
<TD class=title>交易幣別</TD>
<TD>[$TRADE_CRNCY$]</TD></TR>
<TR>
<TD class=title>交割幣別</TD>
<TD>[$CLEAR_CRNCY$]</TD></TR>
<TR>
欄位筆數不超過五十筆,手工改不會花太久時間,但心想HTML操弄是jQuery最擅長的領域,決定讓它露兩手瞧瞧!
$(function() {
$("span[id^=OrderUserControl1_lab_]").each(function() {
var spn = $(this);
if (spn.is(":parent"))
spn.text("[$" + spn.attr("id")
.replace("OrderUserControl1_lab_", "") + "$]");
spn.replaceWith(spn.text());
});
$("*[id]").removeAttr("id");
$("*").css("display", "");
var xwin = window.open("about:blank");
xwin.document.write($("table:first").html());
});
從另外新開的視窗View Source就可以取回HTML Code了。程式中用了is(), [id^=...] Selector, replaceWith(), 10行搞定。
Comments
# by 哇沙米
這真的是很方便,常常套用來套用去在不同站台時,就很省事。
# by Derek
真是非常棒的方法呢!不過有個問題想要問一下:有時候我們需要從別的WebSite抓html過來然後parse拿出一個table裡的資料,現在都是用Regular Expression。有沒有可能改成抓下html後,自動插入一段寫好的javascript,然後輸出自己要的html格式? 要寫程式控制抓html、插javascript到html裡都ok,我的疑惑在於怎麼讓自己的程式再去run改過的html並拿到輸出的html咧?
# by Jeffrey
to Derek, 用window.open或iframe的方式載入另一個網頁,只要排除cross-domain的情況,存取該網頁的DOM不是問題。現成的範例你可以參考Mini jQuery Lab(http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/02/15/mini-jquery-lab-online.aspx),下方的HTML Result就是IFrame嵌入的另一個網頁。
# by Derek
Dear Jeffrey大大, 我徹底的通暢了,真感謝你的神來一通! By the way, 你的Mini jQuery真是超酷的^^
# by deded
請教一下,HTML的樣版在ASP.Net中可以怎麼使用呢?能不能給我一些關鍵字,我去網路上找相關資料
# by Jeffrey
to deded, 不是很懂"HTML樣版"的定義,看你要不要再補充說明一下。
# by 咖啡喵
借問一下 <div id="a"> </div> 我要如何用 jQuery 把 <script type="..." src="..."></script> 加到 div 裡面去? 試了好久一直沒辦法
# by Jeffrey
to 咖啡喵, 會這麼在意script安插的位置,莫非其中用了document.write()的技巧? 若是如此,就算事後將script夾到其中,恐怕也沒法控制內容產生在其中。看要不要說一下你這個需求背後的用意,大家一起研究看看。
# by 咖啡喵
Dear Jeffrey,您猜對了 事實上是網頁那塊 script 是載入別人家的東西,結果會在開啟網頁時停頓 所以想說能不能網頁載入完再載那塊 昨天試了好久 不是加不上去 就是加上去了,內容呈現是在頁尾(整個貼齊頁底)
# by Jeffrey
to 咖啡喵, 將變更DOM的Code保持在DOM全部載入後是較佳的策略,但當DOM已經輸出完整,再執行document.write()是會輸出在文件的最後端,而且這行為應該已超出標準DOM規範,很難保證所有Browser的處理行為一致。我想到的方法是另外做一個隱藏iframe,讓script在其中執行,之後再伸手進去把要的內容撈出來放到主要的DOM結構中,但看來也是大費周章,不怎麼高明。