從HTML文件

Question

創建CSS我有一個包含許多內容的HTML文件：

<div> 
    <div id="imgElt11289447233738dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 795px; BORDER-LEFT: 0px; WIDTH: 90px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 186px; HEIGHT: 93px" lineid="lineid" y2="279" y1="186" x2="885" x1="795"> 
     <img style="WIDTH: 90px; HEIGHT: 93px" height="21" alt="Image" src="../images//k03.jpg" width="25" name="imgElt11289447233738dIi15vNI1m6G" tag="img"></img></div> 
    <div id="imgElt11288263284216dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 660px; BORDER-LEFT: 0px; WIDTH: 147px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 1964px; HEIGHT: 22px" lineid="lineid" y2="1986" y1="1964" x2="807" x1="660"> 
     <img style="WIDTH: 147px; HEIGHT: 22px" height="21" alt="Image" src="../images//k03.jpg" width="25" name="imgElt11288263284216dIi15vNI1m6G" tag="img"></img></div> 
    <div id="txtElt11288262779851dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 2872735; LEFT: 250px; BORDER-LEFT: 0px; WIDTH: 95px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 1514px; HEIGHT: 18px" selectedindex="0" pos_rel="false" lineid="lineid" y2="1532" y1="1514" x2="345" x1="250" tag="div"> 
     <p><strong><font face="arial,helvetica,sans-serif" size="2">Course Name</font></strong></p> 
    </div> 
    <div id="txtElt11288262309675dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1565881; LEFT: 40px; BORDER-LEFT: 0px; WIDTH: 430px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 1464px; HEIGHT: 34px" selectedindex="0" pos_rel="false" lineid="lineid" y2="1498" y1="1464" x2="470" x1="40" tag="div"> 
     <p><strong> 
     <font face="arial,helvetica,sans-serif" size="2" tag="font">16. Please 
     write below the Course Name in order of preference.</font></strong></p> 
     <p tag="p"><strong><font face="Arial" size="2" tag="font">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (Please 
     see the &quot;Instructions to Candidate&quot; for list of courses)</font></strong></p> 
    </div> 
</div> 

可以看出，1個格中有很多的div。現在我想創建一個包含這個html頁面所有樣式的css文件（不一定是相同的）。必須用java代碼寫東西。我有這個文件的DOM對象可用於我。

基本上，我想從這裏帶走所有的風格和喜歡下id爲DIV一個CSS文件將被保留= imgElt11289447233738dIi15v CSS將是：

#imgElt11289447233738dIi15v{BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 795px; BORDER-LEFT: 0px; WIDTH: 90px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 186px; HEIGHT: 93px} 

我不直到這部分但是因爲我不知道元素的層次結構會有多少層次，所以還有什麼辦法可以對所有的子元素進行相同的操作？

我用下面的代碼

public static Document getStyleInCSSfile(Document aoDoc, String aoPathToWrite, String aoFileName) throws ApplicationException { 
    String loValue = null; 
    String loID = null; 
    String lsContent = ""; 
    Element loRoot = aoDoc.getRootElement(); 
    List loTempElementList = loRoot.getChildren(); 
    int liCounter; 
    for (liCounter = 0; liCounter < loTempElementList.size(); liCounter++) { 
     Element loTemplateEle = (Element) loTempElementList.get(liCounter); 
     String loId=loTemplateEle.getAttribute("id").getValue(); 
     loID = loTemplateEle.getAttributeValue("id"); 
     if(null != loID) 
     { 
      loValue = loTemplateEle.getAttributeValue("style"); 
      if(loValue!=null && loValue.trim().length()>0) 
      { 
       loTemplateEle.removeAttribute("style"); 
       lsContent = lsContent.concat("#"+loID+"{"+loValue+"}\n"); 
      } 
     } 
    } 
    SaveFormOnLocalUtil.writeToFile(aoPathToWrite,aoFileName,lsContent); 
    return aoDoc; 
} 

編輯：認識了一些正則表達式可以通過獲取SAX解析器對象的字符串，並使用它的正則表達式...任何想法幫助嗎？任何人？如何實現它

Answer 1

我認爲你應該使用SAX而不是DOM。在SAX中，您可以註冊每次解析器看到新標籤，屬性等時調用的處理程序。在這種情況下，每當您看到屬性「style」時，都應該將其值提取到CSS文件中。

下一個方法是使用來自jakarta.apache.org的Digester。它使用SAX並允許XML配置（請參閱DigesterDigester），它將您的值對象直接映射到您的XML文檔。

絕對不同的解決方案可以使用如grep和sed UNIX外殼命令進行。對其中一種解決方案的偏好取決於您的系統要求以及您需要多長時間運行一次該代碼。如果是一次轉換，請使用unix shell腳本。如果它必須是健壯的，並且實時更改頁面，請使用java解決方案。

Answer 2

爲每個標籤定義樣式是否有效？
如果我是你，我會檢查是否有其他標籤具有相同的風格，如果用一種風格的所有元素具有相同的「TAG_NAME」我會用以下內容：

tag_name{text-transform:uppercase;text-align:center;} 

，並與該每個元素標籤名稱（如果其樣式未以其他方式設置）將具有此樣式。
如果有很多不同的標記具有相同的風格：

.class_name{text-transform:uppercase;text-align:center;} 

<tag class="class_name">content</tag>