Question

如何使用Java将外部CSS样式表转换为HTML的“样式”部分？

我希望能够将“外部CSS”存在于“样式”部分中，以便我可以将其解析为内联样式而不是外部样式，而我所看到的最简单的方法是将CSS直接放在HTML而不是链接。

我想在我的HTML中更改此内容：

<link rel="stylesheet" href="smartdoc.css" />

对此（理想情况下，将CSS文件作为方法的参数传递）：

<style>
    Content from external CSS.
</style>

这样我就可以使用JSoup将它转换为内联样式，使用类似的东西：

public static String inlineCss(String html) {
final String style = "style";
Document doc = Jsoup.parse(html);
Elements els = doc.select(style);// to get all the style elements
for (Element e : els) {
  String styleRules = e.getAllElements().get(0).data().replaceAll("\n", "").trim();
  String delims = "{}";
  StringTokenizer st = new StringTokenizer(styleRules, delims);
  while (st.countTokens() > 1) {
    String selector = st.nextToken(), properties = st.nextToken();
    if (!selector.contains(":")) { // skip a:hover rules, etc.
      Elements selectedElements = doc.select(selector);
      for (Element selElem : selectedElements) {
        String oldProperties = selElem.attr(style);
        selElem.attr(style,
            oldProperties.length() > 0 ? concatenateProperties(
                oldProperties, properties) : properties);
      }
    }
  }
  e.remove();
}
return doc.toString();
}

private static String concatenateProperties(String oldProp, @NotNull String newProp) {
oldProp = oldProp.trim();
if (!oldProp.endsWith(";"))
  oldProp += ";";
return oldProp + newProp.replaceAll("\\s{2,}", " ");
}

对此有何建议？

Answer 1

我假设您的所有文件都在以UTF-8编码的本地硬盘上。

<强> dummy.html

<link rel="stylesheet" href="smartdoc.css" />

<强> smartdoc.css

a {
  background-color: red;
}

p {
  background-color: green;
}

示例代码

要用CSS文件内容替换link节点，请执行以下操作：

// Load HTML file
String charsetName = "UTF-8";
Document doc = Jsoup.parse(new File("dummy.html"), charsetName);
System.out.println("BEFORE:\n" + doc.outerHtml());

// Replace each link nodes with its respective CSS file content
for (Element link : doc.select("link[rel=stylesheet]")) {
    String cssFilename = link.attr("href");

    Element style = new Element(Tag.valueOf("style"), "");
    style.appendText("/* " + cssFilename + " */");
    style.appendText(loadCssFileContent(cssFilename, charsetName));

    link.replaceWith(style);
}

System.out.println("\nAFTER:\n" + doc.outerHtml());

private static String loadCssFileContent(String path, String charsetName) throws IOException {
    byte[] encoded = Files.readAllBytes(Paths.get(path));
    return new String(encoded, charsetName);
}

输出

BEFORE:
<html>
 <head>
  <link rel="stylesheet" href="smartdoc.css">
 </head>
 <body></body>
</html>

AFTER:
<html>
 <head>
  <style>/* smartdoc.css */a { background-color: red; } p { background-color: green; }</style>
 </head>
 <body></body>
</html>

如何将外部CSS添加到HTML'样式'

1 个答案:

示例代码

输出