Как вытащить любое значение с атрибута – JS

Всем привет!
В этой статье расскажу про то, как можно вытащить из любого атрибута значение.
Иногда бывает, что в атрибутах прячется для нас полезная информация, с которой мы можем дальше работать. Вот, например, мне нужна была тара товара и адекватная цифра была в атрибуте. Нужно было её извлечь и дальше проводить математические действия.
Моя цель: показать код вам и самому про него не забыть, так как бывает, что в сети такой информации либо нет, либо очень мало. Я думаю, что вы лучше найдете применения для этого кода.

Итак, создам маленький 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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: javascript, полезные статьи