javascript - 匹配 PegDown+JSoup 输出到 PageDown 输出

Question

我正在尝试在客户端和服务器端解析和清理 markdown。

• 在客户端，我使用 PageDown作为 Markdown 编辑器。这正是 StackOverflow 使用的，它带有一个漂亮的预览框。此预览框向您显示已清理 的 html，因此它会删除类似 <div> 的内容标签。

• 在服务器端，我使用 PegDown和 JSoup解析和清理 Markdown 。

但是，我发现两者的输出不相同的情况。例如:

输入markdown: how are <div>tags</div> treated?

PageDown 输出: <p>how are tags treated?</p>

PegDown/JSoup 输出:

<p>how are </p>tags treated?
<p></p>

我没有对 JSoup 做任何花哨的事情。这是我的代码:

public class Main {

    public static void main(String... args){

        PegDownProcessor pdp = new PegDownProcessor();

        String markdown = "how are <div>tags</div> treated?";

        String html = pdp.markdownToHtml(markdown);

        Whitelist whitelist = Whitelist.relaxed().removeTags("div");

        html = Jsoup.clean(html, whitelist);
        System.out.println(html);

        System.out.println("Done.");
    }
}

我明白为什么会这样，我对两个不同的系统产生两个不同的输出并不感到惊讶。 我的问题是:我如何设置 JSoup 以便它简单地删除 <div>标签而不是添加额外的 <p>标签？

我的最终目标是简单地让服务器端解析/清理生成与客户端解析/清理相当相似的结果。如果有更好的方法可以做到这一点，我愿意接受建议。我真的不在乎两者的输出是否完全相同，但是像 extra <p> 这样的东西标签将非常容易被用户注意到，因此我试图消除这一主要差异。

奖励问题:是否有 PageDown 可以输出的 html 标签和属性的列表？

编辑:我也试过使用 the OWASP sanitizer ，但我得到非常相似的结果:<div>标签已删除，但 <p>标签以上述方式“固定”，这导致 html 与 PageDown 的 sanitizer 不同。

Answer 1

how can I setup JSoup so that it simply removes the <div> tags instead of adding extra <p> tags?

HTML 5 规范拒绝使用 div p 中的元素元素。Jsoup 尊重这些规范，这就是为什么有两个 p最终 html 字符串中的元素。

为了更好地理解为什么会发生这种情况，让我们看看 Jsoup#clean 是如何发生的分三步工作:

1. 解析脏 html
   
2. 调整结果树以符合 HTML 5 规范
3. 删除拒绝的标签

在第 2 步中，第一个 <p>标签在开幕前关闭 div .第二个p在同一步骤中也获取其开始标记。由于 Jsoup 不知道该段的合法内容从哪里开始，因此它将第二段的内容限制为严格的数量(即什么都没有)。

第 1 步和第 2 步中的操作会创建满足 HTML 5 规范的新 HTML 代码。在第 3 步中，div现在可以删除了。

My end goal is to simply have the server-side parsing/sanitizing generate reasonably similar results to the client-side parsing/sanitizing.

为避免像此处发现的其他情况，您应该在客户端和服务器端使用相同的系统。由于 Pagedown 是用 Javascript 编写的，您可以尝试在服务器端 Javascript 引擎中运行它。

举几个例子:

• Nashorn(内置 Java 8)
• 犀牛
• V8

示例代码

这是一个示例，说明了 Nashorn 的用法:

Caller.java

ScriptEngine engine = new ScriptEngineManager().getEngineByName("nashorn");
engine.eval(new FileReader("script.js"));

Invocable invocable = (Invocable) engine;

Object result = invocable.invokeFunction("myFunction", "fooValue");

System.out.println(result);
System.out.println(result.getClass());

script.js

function myFunction(foo) {
   // ...
}

另见

• How to embed V8 in a Java application?
• List of HTML5 elements that can be nested inside P element?