在JavaScript中严格的HTML解析

2019-08-26 14:34:36 阅读：126 来源： 互联网

在Google Chrome(Canary)上,似乎没有字符串可以使DOM解析器失败.我正在尝试解析一些HTML,但如果HTML不完全,100％,有效,我希望它显示错误.我试过了明显的事：

var newElement = document.createElement('div');
newElement.innerHTML = someMarkup; // Might fail on IE, never on Chrome.

我也尝试过this question中的方法.无效标记也不会失败,即使是我能生成的最无效的标记也是如此.

那么,至少有一些方法可以在Google Chrome中“严格”解析HTML吗？我不想自己使用令牌或使用外部验证实用程序.如果没有其他选择,那么严格的XML解析器就可以了,但某些元素不需要在HTML中关闭标记,最好不要失败.

解决方法:

使用DOMParser分两步检查文档：

>通过将文档解析为XML,验证文档是否符合XML.
>将字符串解析为HTML.这需要一个modification on the DOMParser.
遍历每个元素,并检查DOM元素是否是HTMLUnknownElement的实例.为此,getElementsByTagName(‘*’)非常适合.
(如果要严格解析文档,则必须递归循环遍历每个元素,并记住元素在该位置是否为allowed to be placed.例如< area> in< map>)

演示：http://jsfiddle.net/q66Ep/1/

/* DOM parser for text/html, see https://stackoverflow.com/a/9251106/938089 */
;(function(DOMParser) {"use strict";var DOMParser_proto=DOMParser.prototype,real_parseFromString=DOMParser_proto.parseFromString;try{if((new DOMParser).parseFromString("", "text/html"))return;}catch(e){}DOMParser_proto.parseFromString=function(markup,type){if(/^\s*text\/html\s*(;|$)/i.test(type)){var doc=document.implementation.createHTMLDocument(""),doc_elt=doc.documentElement,first_elt;doc_elt.innerHTML=markup;first_elt=doc_elt.firstElementChild;if (doc_elt.childElementCount===1&&first_elt.localName.toLowerCase()==="html")doc.replaceChild(first_elt,doc_elt);return doc;}else{return real_parseFromString.apply(this, arguments);}};}(DOMParser));

/*
 * @description              Validate a HTML string
 * @param       String html  The HTML string to be validated 
 * @returns            null  If the string is not wellformed XML
 *                    false  If the string contains an unknown element
 *                     true  If the string satisfies both conditions
 */
function validateHTML(html) {
    var parser = new DOMParser()
      , d = parser.parseFromString('<?xml version="1.0"?>'+html,'text/xml')
      , allnodes;
    if (d.querySelector('parsererror')) {
        console.log('Not welformed HTML (XML)!');
        return null;
    } else {
        /* To use text/html, see https://stackoverflow.com/a/9251106/938089 */
        d = parser.parseFromString(html, 'text/html');
        allnodes = d.getElementsByTagName('*');
        for (var i=allnodes.length-1; i>=0; i--) {
            if (allnodes[i] instanceof HTMLUnknownElement) return false;
        }
    }
    return true; /* The document is syntactically correct, all tags are closed */
}

console.log(validateHTML('<div>'));  //  null, because of the missing close tag
console.log(validateHTML('<x></x>'));// false, because it's not a HTML element
console.log(validateHTML('<a></a>'));//  true, because the tag is closed,
                                     //       and the element is a HTML element

有关没有DOMParser的XML验证的替代方法,请参阅revision 1 of this answer.

注意事项

>当前方法完全忽略doctype,以进行验证.
>此方法为< input type =“text”>返回null,而它是有效的HTML5(因为标记未关闭).
>未检查一致性.

标签：html,javascript,html-parsing
来源： https://codeday.me/bug/20190826/1730777.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在JavaScript中严格的HTML解析