Собираем все названия статей с сайта за 3 секунды

Время чтения - 3 мин

Количество прочтений

1108

Дата публикации —
02 января 2025

Андрей Павлович

Частный SEO-специалист и автор статьи

“

Нужно собрать названия статей на одной площадке, чтобы определить на какую тему лучше всего писать статью, но руками собирать долго. Может вы подскажите быстрый способ?

Алексей

Если вы когда-нибудь хотели быстро собрать заголовки статей с сайта, то с помощью этой инструкции вы сможете сделать это всего за 3 секунды + 3 минуты на настройку, даже если никогда раньше не работали с JavaScript. Для выполнения нужно обладать минимальными знаниями HTML и CSS и просто следовать инструкции ниже.

Найдите нужные элементы на сайте

Откройте страницу, на которой находятся статьи, и нажмите правой кнопкой мыши на заголовок одной из статей → в выпадающем меню выберите "Просмотреть код" (или Inspect).

После нажатия вам откроется код сайта (сбоку или снизу), в которой вы увидите HTML-разметку с выделенным тегом, содержащим текст заголовка. Это может быть <a>, <div> или любой другой элемент.

Проверьте, есть ли у этого тега уникальный класс, например в моем случае это "t404__title t-heading t-heading_xs" (выделен на скриншоте выше). Если class= отсутствует, то обратите внимание на родительский элемент, отвечающий за весь блок или на атрибуты вроде id, которые могут быть уникальными, например:

<a class="article-title" href="/article/123">Название статьи</a>

В примере выше уникальным классом будет class="article-title". После того, как класс найден составляем селектор.

Как составить селектор

Используйте тег элемента: Если заголовок находится, например, в <div>, начните селектор с этого тега:

div

После добавляем то, что содержалось после class =. Каждый класс добавляется через точку (.), поэтому вместо пробелов используем точки:

Как выглядел код
<div class="t404__title t-heading t-heading_xs" style="height: 148px;">Не получается заменить файл robots.txt в 1С Bitrix - Решено</div>

Как будет выглядеть селектор
div.t404__title.t-heading.t-heading_xs

Тестируем селектор

Чтобы убедиться, что всё работает, откройте консоль браузера. Для этого нажмите Ctrl + Shift + J, после чего в боковой панели у вас отобразится Console. Вставьте код ниже, заменив CSS_SELECTOR на созданный вами ранее, и нажмите Enter:

const titles = Array.from(document.querySelectorAll('CSS_SELECTOR')).map(el => el.innerText.trim());
console.log(titles.join('\n'));

«Если всё сделано правильно, вы увидите список заголовков в консоли. Если ничего не отобразилось, проверьте селектор — возможно, вы выбрали неверный класс или элемент.»

Настройка скрипта и добавление в закладки

Используя шаблон скрипта ниже замените "Вставить сюда" на selector, который создали и протестировали ранее.

javascript:(function(){
    const titles = Array.from(document.querySelectorAll('Вставить сюда')).map(el => el.innerText.trim());
    if (titles.length > 0) {
        const content = titles.join('\n');
        const newTab = window.open();
        if (newTab) {
            newTab.document.body.innerHTML = `<pre style="white-space: pre-wrap; word-wrap: break-word;">${content}</pre>`;
        } else {
            alert("Невозможно открыть новую вкладку.");
        }
    } else {
        alert("Статьи не найдены.");
    }
})();

«Для разового использования достаточно использовать скрипт выше. Если вы хотите искать статьи на определенном сайте на постоянной основе, то можно добавить его в закладки»

Переходим на сервис Bookmarklet Maker и вставляем ранее подготовленный javascript в самое большое поле и нажимаем Generate Bookmarklet, после чего копируем код из поля Output:

1. Откройте меню закладок нажав комбинацию клавиш Ctrl+Shift+O (Windows) или Command+Shift+O (Mac);
2. В открытом меню закладок нажмите на троеточие в правом верхнем углу → "Новая закладка"

3. Задайте название вида "Сбор названий статей" в поле Имя;
4. Вставьте скопированный из Bookmarklet Maker код в поле URL;
5. Нажмите Сохранить (Готово), чтобы закладка появилась в списке.

Основные вопросы

Скрипт в закладке требует специального форматирования, которое автоматически выполняет Bookmarklet Maker, убедитесь, что вы вставили в него нужный скрипт, а в закладку добавили код именно из Bookmarklet.
Убедитесь, что в настройках браузера разрешены всплывающие окна для вашего сайта.