从HTML文件创建CSS

Question

我有一个包含许多元素的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中有很多div.现在我想创建一个css文件,它将包含这个html页面的所有样式(不必相同).必须用java代码写一些东西.我有这个文件的DOM对象可供我使用.

基本上,我希望从这里删除所有样式,并将保存在CSS文件中,例如id为id = imgElt11289447233738dIi15v的div将是:

#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 shell 命令可以得到完全不同的解决方案。对其中一种解决方案的偏好取决于您的系统要求以及您必须运行此代码的频率。如果是一次性转换，请使用 unix shell 脚本。如果它必须是健壮的并动态更改页面，请使用 java 解决方案。