JavaScript | Как получить текст из ссылки?

Есть интернет-магазин. У него есть сниппеты-ссылки: картинка + заголовок + что-то ещё.

JavaScript - Как получить текст из ссылки - сниппет с картинкой и текстом
JavaScript — Как получить текст из ссылки — сниппет с картинкой и текстом

Мы видим, что ссылкой обёрнуты элементы: изображения, цены, заголовка, акционной метки, услуги. Это правильно т. к. пользователь может «тыкнуть» куда угодно. Одному захочется нажать для совершения перехода на картинку, а другому на заголовок.

В данной ситуации нас интересует именно текстовое описание, которое встречается между открывающим и закрывающим тегами элемента <a>. Как его достать?


Для начала получим сам элемент. Воспользуемся путём JS из инструментов разработчика и скопируем путь.

document.querySelector("#__ozon > div > div.a4e4.undefined > div.container.b6e3 > div:nth-child(4) > div.b5y7.b5y > div > div.a7a9 > div:nth-child(1) > a")
Получение элемента a со страницы в консоль
Получение элемента a со страницы в консоль

Мы успешно получили элемент ссылки и все его внутренности. То есть мы имеем всю внутреннюю разметку элемента <a>.

Мы знаем, что всё в JavaScript является объектами. Поэтому мы можем дописать в команду «.innerText«, чтобы получить текстовое содержимое элемента.

document.querySelector("#__ozon > div > div.a4e4.undefined > div.container.b6e3 > div:nth-child(4) > div.b5y7.b5y > div > div.a7a9 > div:nth-child(1) > a").innerText

Вывод в консоль браузера:

Текстовое содержимое внутри ссылки
Текстовое содержимое внутри ссылки

Воу! Всё получилось! Мы вытащили весь текст из ссылки и теперь можем с ним проводить разные манипуляции. Получили строковый тип данных.

Проблема только в том, что эта строка содержит спецсимволы, которые мешают нам получить заголовок товара. Но это решаемо. Мы видим, что нужный нам заголовок товара находится в самом конце (внизу столбца). Нам повезло, решим быстро. В качестве разделителя строки по смыслу выступают символы «Возврата каретки» (CR — Carriage Return) и «Переноса строки» (LF — Line Feed)

Возврат каретки и Перенос строки - JavaScript
Возврат каретки и Перенос строки — JavaScript

 

Воспользуемся методом split() для объекта String и разнесём строчки на элементы массива. В качестве разделителя будем использовать «Последовательность побега» (Escape Sequence):

  • LF — Line Feed будет «\n»
  • CR — Carriage Return будет «\r»

Команда:

document.querySelector("#__ozon > div > div.a4e4.undefined > div.container.b6e3 > div:nth-child(4) > div.b5y7.b5y > div > div.a7a9 > div:nth-child(1) > a").innerText.split("\n")

Результат выполнения — массив:

Разделение строки на элементы массива - JavaScript
Разделение строки на элементы массива — JavaScript

Теперь каждый элемент массива содержит строку, к которой можно обратиться по индексу. Нас интересует последний элемент массива. Достанем его:

document.querySelector("#__ozon > div > div.a4e4.undefined > div.container.b6e3 > div:nth-child(4) > div.b5y7.b5y > div > div.a7a9 > div:nth-child(1) > a").innerText.split("\n")[document.querySelector("#__ozon > div > div.a4e4.undefined > div.container.b6e3 > div:nth-child(4) > div.b5y7.b5y > div > div.a7a9 > div:nth-child(1) > a").innerText.split("\n").length - 1]

Ключевое тут «length — 1». Мы не присваиваем переменные и делаем выполнение команд анонимно, поэтому выглядит страшно. Но это только для примера.

Заголовок из ссылки - JavaScript
Заголовок из ссылки — JavaScript

Мы получили заветный заголовок товара в виде строки. Теперь можем положить его в базу данных, например.

Ссылки

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

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

DOM стандарт — https://efim360.ru/dom/

Читайте перевод полной версии стандарта «объектной модели документа», чтобы ознакомиться со всеми концепциями и интерфейсами.

DOMLiving Standardhttps://dom.spec.whatwg.org

Читайте официальную документацию живого стандарта «объектной модели документа», чтобы быть в курсе последних изменений.

https://dom.spec.whatwg.org/#dom-document-getelementsbytagname

JavaScriptМассивыhttps://efim360.ru/javascript-massivy-array/

ECMAScriptLiving Standardhttps://tc39.es/ecma262/

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