Tạo CSS từ một tập tin HTML

Question

Tôi có một file html chứa nhiều yếu tố:

<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> 

Như có thể thấy, 1 div có nhiều divs trong đó. Bây giờ tôi muốn tạo một tệp css sẽ chứa tất cả kiểu dáng của trang html này (không cần phải giống nhau). Phải viết một cái gì đó trong mã java. Tôi có đối tượng DOM của tệp này có sẵn cho tôi.

Về cơ bản, tôi muốn tất cả các phong cách để được gỡ bỏ từ đây và sẽ được giữ trong một file CSS như cho div với id = imgElt11289447233738dIi15v css sẽ là:

#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} 

Tôi không đến phần này nhưng vì tôi không biết có bao nhiêu cấp độ phân cấp của các phần tử sẽ có cách nào để làm tương tự cho tất cả các phần tử con không?

tôi đã sử dụng đoạn mã sau

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; 
} 

Edit: đã biết rằng một số biểu hiện thường xuyên có thể giúp đỡ bằng cách nhận được một chuỗi các đối tượng SAX phân tích cú pháp và và sử dụng biểu thức chính quy vào nó ... bất kỳ ý tưởng? bất kỳ ai? cách triển khai nó

Answer 1

Tôi nghĩ bạn nên sử dụng SAX thay vì DOM. Trong SAX, bạn có thể đăng ký trình xử lý được gọi mỗi lần trình phân tích cú pháp thấy thẻ mới, thuộc tính, v.v. Trong trường hợp này mỗi khi bạn thấy thuộc tính "kiểu", bạn nên trích xuất giá trị của nó thành tệp CSS.

Cách tiếp cận tiếp theo là sử dụng Digester từ jakarta.apache.org. Nó sử dụng SAX và cho phép cấu hình XML (xem DigesterDigester) ánh xạ đối tượng giá trị của bạn trực tiếp yo tài liệu XML của bạn.

Giải pháp hoàn toàn khác có thể được thực hiện bằng cách sử dụng các lệnh unix shell như grep và sed. Tùy chọn cho một trong các giải pháp phụ thuộc vào yêu cầu hệ thống của bạn và tần suất bạn phải chạy mã này. Nếu nó là một thời gian chuyển đổi sử dụng unix shell scripting. Nếu nó phải là một cái gì đó mạnh mẽ và thay đổi các trang trên bay sử dụng giải pháp java.

Answer 2

có hiệu quả để xác định kiểu cho từng thẻ không?
nếu tôi là bạn tôi đã kiểm tra nếu có thẻ khác có cùng một phong cách và nếu tất cả các yếu tố với một phong cách có cùng 'TAG_NAME' i muốn sử dụng như sau:

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

và mọi phần tử với điều này tên thẻ (nếu kiểu của nó không được đặt theo bất kỳ cách nào khác) sẽ có kiểu này.
nếu có rất nhiều thẻ khác nhau với cùng một phong cách:

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

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