BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2021-07-05 / Вр:22:50 / просмотров: 1199

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

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

Попробуем вывести ширину картинки. В JS коде обращаемся к тому же объекту «img.wp-post-image», но к атрибуту «width»:

<script>
var bloggood = document.querySelector("img.wp-post-image").width;
console.log(bloggood);
</script>

В результате вы увидите в консоле браузера «150»:

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

Теперь 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»:

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

Это все.
В знак благодарности можете удалить adblock

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 807
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4707