如何在WebView中像Chrome一样完整显示含标签的XML文档？

嘿，这个问题我之前开发JavaFX应用时也碰到过！WebEngine默认会把XML当作可渲染的标记语言来解析，所以才会自动隐藏标签只显示文本内容。这里有几个实用的解决办法，你可以根据需求选：

方法一：以纯文本形式加载XML #

最简单的方式就是直接告诉WebEngine，加载的内容是纯文本，不要解析标签。你可以读取XML文件的内容，然后用loadContent()方法指定MIME类型为text/plain：

import java.nio.charset.StandardCharsets;
import java.nio.file.Files;
import java.nio.file.Path;

// 读取XML文件内容
String xmlContent = new String(Files.readAllBytes(f.toPath()), StandardCharsets.UTF_8);
// 以纯文本类型加载内容
webEngine.loadContent(xmlContent, "text/plain");

这样WebEngine就会原封不动地显示所有XML标签和文本，不会做任何解析处理。

方法二：转义XML后用HTML包裹显示 #

如果想让XML显示更规整（比如保留换行和缩进），可以把XML的特殊HTML字符转义，然后包裹在<pre>和<code>标签里，当作HTML加载：

方式1：使用Apache Commons Lang工具类 #

import org.apache.commons.text.StringEscapeUtils;
import java.nio.charset.StandardCharsets;
import java.nio.file.Files;

String xmlContent = new String(Files.readAllBytes(f.toPath()), StandardCharsets.UTF_8);
// 转义HTML特殊字符（<、>、&等）
String escapedXml = StringEscapeUtils.escapeHtml4(xmlContent);
// 包裹成带格式的HTML
String htmlContent = "<html><body style='padding:10px;'><pre><code>" + escapedXml + "</code></pre></body></html>";
webEngine.loadContent(htmlContent);

方式2：自己实现简单转义（无需第三方库） #

如果你不想引入额外依赖，可以手动转义关键字符：

String xmlContent = new String(Files.readAllBytes(f.toPath()), StandardCharsets.UTF_8);
// 手动转义HTML特殊字符
String escapedXml = xmlContent.replace("&", "&")
                              .replace("<", "&lt;")
                              .replace(">", "&gt;")
                              .replace("\"", "&quot;")
                              .replace("'", "&#39;");
String htmlContent = "<html><body><pre><code>" + escapedXml + "</code></pre></body></html>";
webEngine.loadContent(htmlContent);

方法三：实现XML语法高亮（进阶） #

如果想要更美观的显示效果，比如标签、属性用不同颜色区分，可以借助前端的语法高亮逻辑，把XML内容和样式打包成HTML加载：

import org.apache.commons.text.StringEscapeUtils;
import java.nio.charset.StandardCharsets;
import java.nio.file.Files;

String xmlContent = new String(Files.readAllBytes(f.toPath()), StandardCharsets.UTF_8);
String escapedXml = StringEscapeUtils.escapeHtml4(xmlContent);
// 构建带高亮的HTML内容
String htmlContent = """
    <html>
      <head>
        <style>
          pre { background-color: #f5f5f5; padding: 15px; border-radius: 4px; font-family: monospace; }
          .tag { color: #880000; }
          .attribute { color: #000088; }
          .value { color: #008800; }
        </style>
        <script>
          function highlightXml() {
            const code = document.querySelector('code');
            let content = code.textContent;
            // 匹配标签
            content = content.replace(/(&lt;\/?[^&]+?&gt;)/g, '<span class="tag">$1</span>');
            // 匹配属性和值
            content = content.replace(/(\w+?)=(&quot;.*?&quot;)/g, '<span class="attribute">$1</span>=<span class="value">$2</span>');
            code.innerHTML = content;
          }
        </script>
      </head>
      <body onload="highlightXml()">
        <pre><code>""" + escapedXml + """</code></pre>
      </body>
    </html>
""";
webEngine.loadContent(htmlContent);

如果想要更专业的高亮效果，也可以引入成熟的前端高亮库（比如highlight.js），不过离线环境需要把相关资源下载到本地使用。

内容的提问来源于stack exchange，提问作者Majiba