JavaScript | Как получить весь текст на HTML-странице?

Одной командой

document.documentElement.innerText

Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить весь текст. Включаете «Инструменты разработчика» в браузере (CTRL + SHIFT + i). Находите вкладку «Console«. Тыкаете курсор в белое поле справа от синей стрелочки. Вставляете команду. Жмёте клавишу ENTER.

Для тех кто не понял длинную строчку кода выше, предлагаю упрощённую для понимания версию. Пошаговая инструкция и видео ниже.

Видео инструкция

В этом видео приводится пример получения всего текста на HTML-странице при помощи JavaScript и объектной модели документа. Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу.

Решение вопроса

Мы будем использовать объектную модель документа — DOM. Обращаемся к объекту document.

document

Скриншот страницы и вкладки Console:

Объект document на странице телевизора Xiaomi Mi TV 4S - JavaScript
Объект document на странице телевизора Xiaomi Mi TV 4S — JavaScript

Мы видим, что объект хранит в себе всю разметку.

 

Получим «элемент документа» — по сути получим всю разметку страницы (элемент html и его содержимое) + это будет не строка, а набор объектов элементов.

document.documentElement

Вывод в консоль:

Получение элемента документа html - JavaScript
Получение элемента документа html — JavaScript

Эта команда отсекла только элемент DOCTYPE. Он нам всё равно не нужен. Эта информация важна только браузеру.

 

Теперь вся разметка представлена в виде объектов JavaScript. Каждый объект хранит в себе пары «ключ/значение» — с общими и уникальными ключами. Все объекты HTML-элементов имеют ключ innerText. Это значит, что мы сможем получить всё текстовое содержимое каждого парного элемента. Причём получим не только видимый на экране текст, но и скрытый текст (текст может быть скрытым из-за особенностей дизайна сайта и оформления вкладок внутри страницы).

document.documentElement.innerText

Вывод в консоль:

Текст с переносами со всей страницы - JavaScript
Текст с переносами со всей страницы — JavaScript

 

 

Текст с переносами со всей страницы - фрагмент 2 - JavaScript
Текст с переносами со всей страницы — фрагмент 2 — JavaScript

 

Итог

Мы получили весь текст со страницы. Теперь можно разбить весь этот текст на строки и положить в массив. Потом можно разбить полученные предложения на слова. Далее можно составить поисковый индекс и рейтинг слов на странице.

Поисковая фраза — «js all document innertext»

Ссылки

Стандарт DOM — перевод на русском

Стандарт DOM — официальная документация

JavaScript | Строки (String)

JavaScript | Массивы (Array)

 

Поделись записью