验证由JavaScript生成的动态HTML

Question

验证由JavaScript生成的动态HTML

4

如何验证由JavaScript生成的内容是否为有效的HTML？例如，以下文档将通过静态HTML验证（例如validator.nu），不会产生任何JavaScript错误，并且在浏览器中呈现时不会出现任何问题：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>test</title>
        <script>
            window.onload = function() {
                var text = document.createTextNode('nested anchor');
                var anchor = document.createElement('a');
                var nested_anchor = document.createElement('a');
                nested_anchor.appendChild(text);
                anchor.appendChild(nested_anchor);
                document.getElementsByTagName('body')[0].appendChild(anchor);
            };
        </script>
    </head>
    <body>
        <p>test</p>
    </body>
</html>

然而，输出结果包含另一个锚点元素，这在HTML5规范中是无效的。有没有办法检查这些错误？

- user993096

可能是重复的问题：制作/查找HTML5验证器书签工具。 - cmeeren

4个回答

2

一种可能性是使用Web 开发者工具栏（Chrome和Firefox）的验证本地HTML功能。此功能将使用W3验证器来验证生成的HTML。

您也可以使用我的JavaScript书签而不是下载扩展程序来验证本地HTML。创建一个书签，然后将下面的代码粘贴到“URL”字段中。然后，每当您想要验证本地HTML时，请单击书签。下面的代码是独立的，不需要任何框架。

javascript:void(function(){
    var form = document.createElement("form");
    form.method = "POST";
    form.enctype = "multipart/form-data";
    form.action = "http://validator.w3.org/check";
    form.target = "_blank";

    /* Get local HTML*/
    var html = "<html>" + document.documentElement.innerHTML + "</html>";
    var post_data = {
        fragment: html,/*Settings for validator*/
        prefill: "0",
        doctype: "HTML5",
        prefill_doctype: "html401",
        group: "0",
        ss: "1",
        outline: "1"
    };
    for(var name in post_data){
        (function(){
            var t = document.createElement("textarea");
            t.name = name;
            t.value = post_data[name];
            form.appendChild(t)
        })()
    }
    document.body.appendChild(form);
    form.submit(); /* Open validator, in new tab*/
    document.body.removeChild(form);
})()

- Rob W

1

@SalmanPK 我已经创建了一个改进版本，其中还包括页面的文档类型和其他根元素。请参见此答案：制作/查找HTML5验证器书签。 - Rob W

太棒了。再次感谢！ :) 我正在开发一个SPA，但是那些Chrome扩展程序都无法处理动态生成的标记 :/ 顺便说一下，我猜那个版本缺少document.body.removeChild(form)调用。 - salmatron

1

"只需在完全加载后保存html源代码，并使用该静态文件进行验证。"

我认为如果这样做可以起作用，当浏览器从DOM中获取HTML的快照时，它会修复许多问题。

- user2323922

0

在完全加载HTML源代码后，只需保存它并使用该静态文件进行验证。

- frisco

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- solendil · Accepted Answer

您可以将生成的HTML作为字符串输出，将其嵌入有效文档并发送以进行验证。在您的情况下，使用jQuery： var htmlText = $(anchor).html()。

甚至更简单的方法，输出整个生成的HTML：console.log($("html").html())。