Строгий разбор HTML в JavaScript - PullRequest
Новая
       10

Строгий разбор HTML в JavaScript

3 голосов
/ 20 февраля 2012

В Google Chrome (Canary) кажется, что ни одна строка не может привести к сбою парсера DOM. Я пытаюсь разобрать некоторый HTML, но если HTML не полностью, на 100% действительный, я хочу, чтобы он отображал ошибку. Я пробовал очевидное: 

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

Я также попробовал метод в этом вопросе . Не сбой при неправильной разметке, даже самой недопустимой разметке, которую я могу создать.

Итак, есть ли какой-нибудь способ "строго" проанализировать HTML в Google Chrome? Я не хочу прибегать к токенизации самостоятельно или использовать внешнюю утилиту проверки. Если другой альтернативы нет, строгий синтаксический анализатор XML подойдет, но некоторые элементы не требуют закрывающих тегов в HTML, и желательно, чтобы они не заканчивались ошибкой.

1 Ответ

6 голосов
/ 20 февраля 2012

Используйте DOMParser для проверки документа в два этапа:

  1. Проверьте, соответствует ли документ XML, проанализировав его как XML.
  2. Разобрать строку какHTML.Это требует модификации на DOMParser .Переберите каждый элемент и проверьте, является ли элемент DOM экземпляром HTMLUnknownElement.Для этой цели хорошо подходит getElementsByTagName('*').(Если вы хотите строго проанализировать документ, вы должны рекурсивно пройтись по каждому элементу и запомнить, разрешено ли элементу размещаться в этом месте. Например: <area> в <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

См. редакция 1 этого ответа для альтернативы валидации XML без DOMParser.

Соображения

  • Текущий метод полностью игнорирует тип документа для проверки.
  • Этот метод возвращает null для <input type="text">, в то время как он действителен в HTML5 (посколькутег не закрыт).
  • Соответствие не проверяется.
...