问题
On Google Chrome (Canary), it seems no string can make the DOM parser fail. I'm trying to parse some HTML, but if the HTML isn't completely, 100%, valid, I want it to display an error. I've tried the obvious:
var newElement = document.createElement('div');
newElement.innerHTML = someMarkup; // Might fail on IE, never on Chrome.
I've also tried the method in this question. Doesn't fail for invalid markup, even the most invalid markup I can produce.
So, is there some way to parse HTML "strictly" in Google Chrome at least? I don't want to resort to tokenizing it myself or using an external validation utility. If there's no other alternative, a strict XML parser is fine, but certain elements don't require closing tags in HTML, and preferably those shouldn't fail.
回答1:
Use the DOMParser
to check a document in two steps:
- Validate whether the document is XML-conforming, by parsing it as XML.
- Parse the string as HTML. This requires a modification on the DOMParser.
Loop through each element, and check whether the DOM element is an instance ofHTMLUnknownElement
. For this purpose,getElementsByTagName('*')
fits well.
(If you want to strictly parse the document, you have to recursively loop through each element, and remember whether the element is allowed to be placed at that location. Eg.<area>
in<map>
)
Demo: 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
See revision 1 of this answer for an alternative to XML validation without the DOMParser.
Considerations
- The current method completely ignores the doctype, for validation.
- This method returns
null
for<input type="text">
, while it's valid HTML5 (because the tag is not closed). - Conformance is not checked.
来源:https://stackoverflow.com/questions/9353791/strict-html-parsing-in-javascript