Представление числа с пробелами между классами тысяч

@alanat · Регистрация: 16.07.2012

Студворк — интернет-сервис помощи студентам

Добрый день.
При отражении числа на странице хотелось бы видеть представление числа с пробелами между классами тысяч.
Например, если число 1000000, то оно должно показываться, как 1 000 000.

HTML5
1
2
<p class="kakoyclass">1000000</p>
<p class="kakoyclass">7500</p>

Какой стиль необходимо применить к <p> или в какой тег необходимо заключить число, чтобы число 1000000 представлялось, как 1 000 000 ?
Заранее благодарен за ответ.

Qwerty_Wasd · 29.10.2018, 19:46

alanat, например - https://codepen.io/qwerty_wasd/pen/KGYBBw

HTML5
1
2
<p class="kakoytoclass">1000000</p>
<p class="kakoytoclass">7500</p>

JavaScript
1
Array.from(document.getElementsByClassName('kakoytoclass'), e => e.textContent = e.textContent.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '));

@alanat · 29.10.2018, 20:01 **[ТС]**

Сообщение от Qwerty_Wasd

Array.from

Т.е в таких случаях без JS или php не обойтись?

Qwerty_Wasd · 29.10.2018, 20:11

Вы можете переверстать, и написать так в ручную для всех таких параграфов

HTML5
1
2
<p class="kakoytoclass">1 000 000</p>
<p class="kakoytoclass">7 500</p>

Сообщение от alanat

Какой стиль необходимо применить к <p> или в какой тег необходимо заключить число, чтобы число 1000000 представлялось, как 1 000 000 ?

ну нет такого CSS правила.

@alanat · 29.10.2018, 21:32 **[ТС]**

Сообщение от Qwerty_Wasd

Вы можете переверстать, и написать так в ручную для всех таких параграфов

Зачем же "переверстать"? Я в шаблон добавил

PHP
1
<?= number_format( $price, 0, ',', ' ' ); ?>

Сообщение от Qwerty_Wasd

ну нет такого CSS правила

Очень надеялся, что есть. Спасибо за ответ.

Добавлено через 1 час 7 минут

Сообщение от Qwerty_Wasd

Array.from(document.getElementsByClassNa me('kakoytoclass'), e => e.textContent = e.textContent.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '));

Почему-то в этой строке показывает ошибку.

Qwerty_Wasd · 29.10.2018, 21:36

alanat, в песочнице нет ошибки. Значит.... и кстати обратите внимание на ваш класс kakoyclass и мой kakoytoclass

Добавлено через 1 минуту
В смысле для Вашей верстки

JavaScript
1
Array.from(document.getElementsByClassName('kakoyclass'), e => e.textContent = e.textContent.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '));

@alanat · 30.10.2018, 23:42 **[ТС]**

Сообщение от Qwerty_Wasd

kakoyclass

Скорее всего у меня какая-то старая версия редактора, поэтому выдает ошибку. (Код-то рабочий.)
Есть ли возможность подогнать код под старую версию?

Qwerty_Wasd · 31.10.2018, 00:01

alanat,

Сообщение от alanat

Есть ли возможность подогнать код под старую версию?

JavaScript
1
2
function _toConsumableArray(arr) {if (Array.isArray(arr)) {for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {arr2[i] = arr[i];}return arr2;} else {return Array.from(arr)}};
[].concat(_toConsumableArray(document.getElementsByClassName('kakoytoclass'))).forEach(function (e) {return e.textContent = e.textContent.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')});

Добавлено через 14 минут
Ну или

JavaScript
1
[].forEach.call(document.getElementsByClassName('kakoytoclass'), e => e.textContent = e.textContent.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '))

@alanat · 31.10.2018, 00:24 **[ТС]**

Сообщение от Qwerty_Wasd

function _toConsumableArray

Огромное спасибо, работает!

Qwerty_Wasd · 31.10.2018, 00:37

alanat, не за что, удачи )

@balboa · 25.10.2022, 20:44

Доброго времени суток

В чем может быть причина, если на странице несколько 15 цен а предложенный вами скрипт, обрабатывает все кроме последнего, т.е 14?

Qwerty_Wasd · 27.10.2022, 20:44

balboa, и Вам всех благ.

Сообщение от balboa

В чем может быть причина, если на странице несколько 15 цен а предложенный вами скрипт, обрабатывает все кроме последнего, т.е 14?

причин только на ум с десяток приходит. Первая из них - последний элемент с текстом цены, имеет другой идентификатор/класс. Сделайте проще, предоставьте пожалуйста кусок дерева DOM, при котором наблюдается Ваша проблема с вышеописанным скриптом.
Для удобства, можно использовать песочницу* и воспроизвести проблему там, так сказать наглядно. Тогда и желающих помочь Вам будет не в пример больше. И проблема решится быстрее.

* популярные варианты - codepen.io, plnkr.co, codesandbox.io, jsbin.com и тд

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

Представление числа с пробелами между классами тысяч

Решение

Решение

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	31.10.2018, 00:37
	alanat, не за что, удачи ) 0

@balboa 0 / 0 / 0 Регистрация: 25.10.2022 Сообщений: 1
	25.10.2022, 20:44
	Доброго времени суток В чем может быть причина, если на странице несколько 15 цен а предложенный вами скрипт, обрабатывает все кроме последнего, т.е 14? 0