HTML Comment Selector

JavaScript класс для выбора DOM элементов на основе содержимого HTML комментариев. Идеален для скрапинга сайтов, где разработчики оставили полезные комментарии, или для тестирования приложений с маркерами в комментариях.

Применение

Многие веб-приложения (особенно Angular, React, Vue) оставляют HTML комментарии в DOM для обозначения привязки данных или границ компонентов. Этот класс позволяет использовать эти комментарии для поиска элементов:

// Выбрать элемент по точному тексту комментария
const regNumber = CommentSelector.selectByTextIncludes('collectionItem.regNumber').parentElement
  .innerText

// Найти все комментарии, содержащие текст
const dataComments = CommentSelector.selectAllByTextIncludes('{{')

// Очистить кеш при изменении DOM
CommentSelector.cleanComments()

Реальный пример

На странице вроде https://goskatalog.ru/portal/#/collections?id=55029802:

Откройте консоль DevTools
Вставьте код класса CommentSelector
Используйте для извлечения данных:

const regNumber = CommentSelector.selectByTextIncludes('collectionItem.regNumber').parentElement
  .innerText

console.log(regNumber) // Выводит регистрационный номер

Возможности

Кеширование комментариев: Сканирует DOM один раз, кеширует результаты
Гибкий поиск: Точное совпадение или поиск подстроки
Поддержка фильтров: Найти один или найти все
Простой API: Статические методы, не требует создания экземпляра
Быстро: Использует нативный API NodeIterator

Исходный код

CommentSelector.js

class CommentSelector {
  static comments = []

  static getAllCommentNodes() {
    if (this.comments.length > 0) return this.comments

    const commentNodes = []
    const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT, null, false)
    let currentNode

    while ((currentNode = iterator.nextNode())) {
      commentNodes.push(currentNode)
    }

    this.comments = commentNodes
    return commentNodes
  }

  static selectByComment(cb) {
    return this.getAllCommentNodes().find(cb)
  }

  static selectByCommentText(text) {
    return this.selectByComment((comment) => comment.nodeValue.trim() === text)
  }

  static selectAllByTextIncludes(text) {
    return this.getAllCommentNodes().filter((comment) => comment.nodeValue.includes(text))
  }

  static selectByTextIncludes(text) {
    return this.getAllCommentNodes().find((comment) => comment.nodeValue.includes(text))
  }

  static cleanComments() {
    this.comments = []
  }
}

Справочник API

Метод	Описание
`getAllCommentNodes()`	Возвращает все HTML комментарии (кешировано)
`selectByComment(callback)`	Найти комментарий используя custom функцию фильтра
`selectByCommentText(text)`	Найти комментарий по точному тексту
`selectByTextIncludes(text)`	Найти первый комментарий, содержащий текст
`selectAllByTextIncludes(text)`	Найти все комментарии, содержащие текст
`cleanComments()`	Очистить кеш (использовать после изменения DOM)