Многие HTML-страницы содержат в своей разметке комментарии. Они нужны для разработчиков, но иногда они могут быть также полезны и для всех остальных пользователей интернета. В комментариях можно встретить полезную информацию. Как их получить? Как получить объекты HTML-элементов комментариев? Как получить строковое представление этих комментариев в виде массива?
Давайте разбираться.
Решение
В решении нам поможет стандарт объектной модели документа (DOM) и стандарт языка разметки гипертекста (HTML).
И самым главным инструментом всех наших вычислений будут регулярные выражения RegExp из JavaScript.
За выборку данных будет отвечать стандарт (Fetch).
Также нам нужно хорошо понимать, что считается комментарием в HTML, как они оформляются, что можно и что нельзя.
Шаг № 1 - Получение всей разметки страницы в виде одной большой строки
Если мы находимся в стандартном вебе и пользуемся доступом к контенту через URI-схемы:
http, https, ipns, chrome-untrusted, ipfs, data, chrome, chrome-extension
то можно смело посылать запрос на выборку данных с сервера по текущему адресу
let str = await fetch(location.pathname).then(resp=>resp.text())
Эта команда вернёт нам нужную строковую разметку текущего открытого документа в браузере.
Строка уже есть.
Шаг № 2 - Что считается HTML-комментарием?
Здесь нужно собрать немного информации из разных мест документации по HTML.
Комментарии должны иметь следующий формат:
- Строка "<!--".
- Опционально, текст с дополнительным ограничением: текст не должен начинаться со строки ">", начинаться со строки "->" и содержать строки "<!--", "-->" или " --!>", и не заканчиваться строкой "<!-".
- Строка "-->".
Примечание!
Текст может заканчиваться строкой "<!", как в <!-- Моими любимыми операторами являются > и <!-->.
Из этого следует то, что комментарии нельзя вкладывать один в один. Браузер это не распознает корректно.
Эта ошибка возникает, если синтаксический анализатор встречает вложенный комментарий (например, <!-- <!-- вложенный --> -->). Такой комментарий будет закрыт первой попавшейся последовательностью кодовых точек "-->", а все последующие будут рассматриваться как разметка.
Эта ошибка возникает, если синтаксический анализатор встречает кодовую точку U+003F (?), где ожидается первая кодовая точка имени начального тега. U+003F (?) и всё содержимое, следующее за кодовой точкой U+003E (>) (если присутствует) или до конца входного потока, рассматриваются как комментарий.
Например, рассмотрим следующую разметку:
<?xml-stylesheet type="text/css" href="style.css"?>
Распространенной причиной этой ошибки является инструкция по обработке XML (например, <?xml-stylesheet type="text/css" href="style.css"?>) или декларация XML (например, <?xml version="1.0 " encoding="UTF-8"?>) используется в HTML.
Самый простой и безопасный способ избежать довольно странных ограничений, описанных в этом разделе, — это всегда экранировать соответствие ASCII без учета регистра для:
- "<!--" как "\x3C!--"
- "<script" как "\x3Cscript"
- "</script" как "\x3C/script"
когда эти последовательности появляются в литералах в сценариях (например, в строках, регулярных выражениях или комментариях), и чтобы избежать написания кода, который использует такие конструкции в выражениях. Это позволяет избежать ловушек, к которым могут привести ограничения в этом разделе: а именно, что по историческим причинам синтаксический анализ блоков скриптов в HTML является странной и экзотической практикой, которая действует неинтуитивно перед лицом этих последовательностей.
Это говорит о том, что в строке, полученной через JavaScript могут быть начальные символы "\x3C!--" для открывания комментария.
Есть ещё моменты касающиеся doctype, но мы их не будем учитывать. Нам это мало интересно. Но если вам нужно, то придётся усчитывать.
Написание кода с учётом условий
Первое регулярное выражение:
/<!--.*?-->/g[Symbol.match](str)||[]
или
Второе регулярное выражение:
/\x3C!--.*?-->/g[Symbol.match](str)||[]
Каждое выражение должно возвращать одинаковый массив элементов. Если сопоставления не будут найдены, то метод [Symbol.match]() вернёт нам null. При сравнении null и пустого массива, нам вернётся пустой массив. То есть мы в любом случае получим массив.
Пример работы выражений:
Обязательно добавляйте символ вопроса для квантификатора звёздочки. Так вы будете отбирать самые короткие последовательности сопоставления.
Тестовые строки для проверки
let str2 = 'Стол<!-- Петя -->Стул<-- Дима -->Кровать<!-- Коля --><-- Гриша --><!-- Иван --><-- Маша -->'
Функция для извлечения HTML-комментариев из строки разметки
function getHTMLCommentsArr(str){return /<!--.*?-->/g[Symbol.match](str)||[]}
Собственный метод, расширяющий стандартный класс String
Мы можем написать свой собственный метод для расширения стандартного набора методов класса String.
String.prototype.getHTMLCommentsArr = function(){return /<!--.*?-->/g[Symbol.match](this)||[]}
Пример работы метода:
Информационные ссылки
Стандарт ECMAScript - https://tc39.es/ecma262/multipage/
Стандарт ECMAScript - Раздел "22.2.5.8 RegExp.prototype [ @@match ] ( string )" - https://tc39.es/ecma262/multipage/text-processing.html#sec-regexp.prototype-@@match
Стандарт ECMAScript - Раздел "22.1.3.12 String.prototype.match ( regexp )" - https://tc39.es/ecma262/multipage/text-processing.html#sec-regexp.prototype-@@match
Стандарт DOM - https://dom.spec.whatwg.org
Стандарт DOM - Русская версия
