Question

如何检查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规范它是无效的。有没有办法检查这些错误？

Answer 1

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

甚至更简单，输出整个结果html console.log($("html").html())

Answer 2

可能是使用网络Developer toolbar（Chrome和Firefox）的验证本地HTML 功能。此功能将使用W3 validator来验证生成的HTML。

您也可以使用我的 JavaScript书签来validate本地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);
})()

Answer 3

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

Answer 4

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

我认为如果这有效，浏览器会在从DOM中快速拍摄HTML时解决许多问题。

验证JavaScript生成的动态HTML

4 个答案:

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