Реализация HTML5 валидатора на чистом яваскрипте?
 

Думаю такой инструмент был бы очень кстати.
Основное применение - контроль качества html кода при его написании в web-based HTML-редакторах.
Дополнительное - использование в NodeJS окружении.

Тремуебого валидатора как я понимаю в природе не существует.
Поэтому я начал подбирать полезные материалы.

Возможно у кого-то есть интерес к разработке или полезная инфа - буду рад.

могу пописать регулярки в свободное время, если чё =)

Боюсь регулярки придется писать всю оставшуюся жизнь. К тому же в JS какая то урезанная имплементация регулярок, так что скорее всего это и вовсе невозможно..

невозможен валидатор, или юзать для этого регулярки?

вообще, тема интересная, по-моему. я бы, возможно, поучаствовал. не уверен только что смогу уделять этому много времени.

ты планируешь валидировать в процессе написания, или уже готовую разметку?

Карма: +1488

регулярками и не сделаешь. нужно парсер писать

есть идея
выдираем парсер из firefox или chrome (он на C++ или C)
компилируем в js с помощью emscripten
используем где хотим

правда тяжелый будет
и тормозить будет наверно

<div id="test"></div>

<script>
    var case1 = '123123 <b>7</b> asdads';
    var case2 = ' <div> asdnaslklj ';

    var box = document.getElementById( 'test' );
    
    box.innerHTML = case1;
    alert( case1 === box.innerHTML );

    box.innerHTML = case2;    
    alert( case2 === box.innerHTML );
</script>

:)

Насколько я знаю Firefox использует парсер, исходники которого на Java. Они просто транслируют код в C вроде бы.
Ну а с Java поможет GWT. Вот кстати рабочий результат: http://livedom.validator.nu/

Но парсер - это только начало. Парсер может указать только на ошибки синтаксиса HTML. Это уже не мало, но этого недостаточно. Важно проверять вложенность элементов и корректность типов атрибутов/элементов. Вот это уже будет посложнее.

так я шутил насчет emscripten :)
мне так кажется
а еще нашел исходники валидатора w3c вот здесь (не смотрел, что там внутри)

велосипед или просто практика для повышения скилла?

Велосипед предполагает повторную реализацию уже существующего решения. Я что-то пропустил? Можно ссылку на работающий в браузере валидатор HTML? Скомпилированный в яваскрипт htmltidy не в счет.

вроде такого ещё не видел. но они есть не в браузере - т.е. не на JS.
а чем он отличается от не работающего в браузере? если привязки к DOM нет, то различий нет никаких.

Ну так то да. Я просто имел ввиду полная реализация на JS. Потому что например для NodeJS можно в общем-то использвовать обертку над экзешником.

Схемы для валидации HTML представляют собой формат Relax NG плюс схема Schematron.

Я разбирал как работает validator.nu. Он использует HTML парсер (либо XML для application/xhtml+xml), который используется в Firfefox. Причем именно как SAX-интерфейс. В качестве контент-хэндлера (обработчика "событий" startElement, startDocument, characters и тд) устанавливается специальный обработчик, получаемый из валидатора. Валидатор по получаемым SAX-событиям делает проверку. Сам валидатор представляет из себя цепочку комбинаций валидаторов. То есть он состоит из валидатора RelaxNG, Schematron, спец-оберток, например, обертки удаляющей data-атрибут, так как он не соответствует схеме RelaxNG. Плюс еще различные checker-ы, проверяющие устаревшие атрибуты, неподдерживаемые фичи и тд.

Реализацию RelaxNG валидатора на JS я нашел. Работает очень хреново и медленно но думаю допилить можно. С Schematron схемой все сложней. По идее она трансформируется в специальный xslt-шаблон, который нужно применить к проверяемому документу. То есть нужна голая имплементация XSLT на JS. Так как валидатор будет работать внутри web-worker'а, а всяких DOM-примочек там нету.

Запаковал этот html5 парсер испольуя browserify.
В итоге имеем живую проверку синтаксиса в редакторе: http://www.new-era63.ru/ace/kitchen-sink.html (выбрать HTML документ сначала)