Всем привет!
В этой статье расскажу про то, как можно вытащить из любого атрибута значение.
Иногда бывает, что в атрибутах прячется для нас полезная информация, с которой мы можем дальше работать. Вот, например, мне нужна была тара товара и адекватная цифра была в атрибуте. Нужно было её извлечь и дальше проводить математические действия.
Моя цель: показать код вам и самому про него не забыть, так как бывает, что в сети такой информации либо нет, либо очень мало. Я думаю, что вы лучше найдете применения для этого кода.
Итак, создам маленький HTML пример:
<img width="150" height="150" src="" class="wp-post-image" alt="2021-BLOGGOOD" loading="lazy" title="BLOGGOOD.RU">
Теперь вытащим из атрибута «title» значение. Буду использовать JavaScript.
<script> var bloggood = document.querySelector("img.wp-post-image").title; console.log(bloggood); </script>
В JS коде идет обращение к картинке «img» с классом «wp-post-image». Я вытаскиваю с объекта значение с атрибута «title».
Вывожу готовую переменную «bloggood» через «console.log» (это не обязательно, можно вывести и через alert(bloggood) )
В результате вы увидите в консоле браузера «BLOGGOOD.RU»:
Попробуем вывести ширину картинки. В JS коде обращаемся к тому же объекту «img.wp-post-image», но к атрибуту «width»:
<script> var bloggood = document.querySelector("img.wp-post-image").width; console.log(bloggood); </script>
В результате вы увидите в консоле браузера «150»:
Теперь BONUS.
Если вдруг в атрибуте есть текст и цифры, а вам нужны только цифры, вот готовое решение, где я использую функцию replace().
Функция REPLACE позволяет производить поиск и замену одних частей строки на другие.
Еще раз HTML пример:
<img width="150" height="150" src="" class="wp-post-image" alt="2021-BLOGGOOD" loading="lazy" title="BLOGGOOD.RU">
С атрибута «alt» я выведу цифры «2021», а текст «-BLOGGOOD» я просто сотру.
<script> var bloggood = document.querySelector("img.wp-post-image").alt; var bloggood2 = bloggood.replace(',', '.').replace(/[^\d\.]/g, "").replace(/\./, "x").replace(/\./g, "").replace(/x/, "."); //вытаскиваем только цифры console.log(bloggood2); </script>
В результате вы увидите в консоле браузера «2021»:
Это все.
В знак благодарности можете удалить adblock
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222519 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187694 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
Добавить комментарий
Метки: javascript, полезные статьи
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐