Вообщем, народ, у меня есть такая проблема: если в поле textarea
вводят слово "чек/чеки" c любым регистром и суммы (каждая в новой строке), например:
4,5
6р.
7руб
34.67 руб
65,3 р.
как-то все это дело считать. Но, я в JS плох, и к тому же, тут надо применять регулярку для маски сумм, а с этим у меня вообще большие проблемы. Обработчик должен быть на keyup
или focusout
. После, надо в функции все это дело проверять. Ну, как-тот так.
Помогите, пожалуйста.
Надеюсь, что в моём примере, Вы найдёте решение вашей проблемы. Я специально не стал сокращать и оптимизировать "регулярки", чтобы было нагляднее. Сложности нет никакой, код тоже небольшой, ибо половина - комментарии.
var oTextInput = document.querySelector('.textinput');
var oTextOutput = document.querySelector('.textoutput');
var nTotalSum = 0;
// Добавляем обработчик к полю ввода
oTextInput.addEventListener('input', function() {
let sTextValue = oTextInput.value;
// Если слово "чек" или "чеки" отсутствует, тогда...
if (!/(чек[и]?\s*\n)/gi.test(sTextValue)) {
// Прячем поле вывода
oTextOutput.classList.remove('show');
// и выходим из обработчика
return
// иначе...
} else {
// Показываем поле вывода
oTextOutput.classList.add('show');
}
// Обнуляем итоговую сумму для подсчёта
nTotalSum = 0;
// Удаляем пробелы и слово "чек/чеки"
sTextValue = sTextValue.replace(' ', '').replace(/(чек[и]?\s*\n)/gi, '');
// Находим суммы и передаём в функцию обработки
sTextValue = sTextValue.replace(/^([\d.,]+?)[\D]*$/gim, fCalcSum);
// Добавляем итоги и форматируем вывод
sTextValue = 'Позиции:=======\n' + sTextValue + '\nИтог:==========\n' + (nTotalSum + 0.0001).toFixed(2) + ' руб.';
// Выводим с разбивкой по разрядам
oTextOutput.value = sTextValue.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
// Прокрутка поля вывода вниз при появлении скролла
oTextOutput.scrollTop = oTextOutput.scrollHeight
});
/* Обработка найденной суммы */
function fCalcSum(found, group) {
// Приводим дробный разделитель к "точке"
group = group.replace(/,/g, '.');
// Если до точки нет чисел, то добавляем ноль в начало
group = group.replace(/^(\.\d+)\D*$/gim, '0$1');
// Если после точки один разряд, то добавляем ноль в конец
group = group.replace(/^(\d+\.\d)\D*$/gim, '$10');
// Если после точки нет чисел или отсутствует дробная часть, то добавляем точку с нулями в конец
group = group.replace(/^(\d+)[\.\D]*$/gim, '$1.00');
// Отсекаем разряды меньше сотых
group = group.replace(/^(\d+\.\d\d).*$/gim, '$1');
// Плюсуем к итоговой сумме
nTotalSum += +group;
// Возвращаем обработанную подстроку
return group.replace(/^0+(0.)/gim, '$1') + ' руб.'
}
.textinput,
.textoutput {
box-shadow: inset 1px 2px 15px rgba(0, 0, 0, .1), 1px 4px 5px rgba(0, 0, 0, .5);
font: bold 16px monospace;
height: 150px;
padding: 5px;
width: 170px;
}
.textoutput {
color: #080;
left: -160px;
opacity: 0;
position: relative;
text-align: right;
transition: all .8s ease;
z-index: -1;
}
.show {
left: 0px;
opacity: 1;
transition: all 1s cubic-bezier(.66, -0.28, .13, 1.71);
}
<textarea class="textinput" placeholder="Введите 'чек', а затем позиции (каждая позиция с новой строки)"></textarea>
<textarea class="textoutput" placeholder="" readonly></textarea>
<div></div>
Окно результатов появляется при вводе слова "чек(и)". Причём, его можно ввести, как сначала, так и по окончании ввода всех сумм.
P.S. Если найдёте ошибки, то прокомментируйте - попробуем исправить)
Просто числа вывести?
const textarea = document.querySelector('textarea')
const display = document.querySelector('pre')
textarea.addEventListener('input', function ({ target: { value } }) {
const words = ['чеки', 'чек'];
words.forEach(function (word) {
if (value.toLowerCase().includes(word)) {
const numbers = getNumbers(value)
// console.log(numbers)
display.textContent = numbers.join('\n')
}
})
})
function getNumbers (text) {
return text.match(/[+-]?\d+((,|.)\d+)?/g)
}
<pre>
Введите чек/чеки
</pre>
<textarea rows="10">
че
7р.
17,00 руб
10.00руб
текст: 1337рубб
</textarea>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Мне на выходе дается такой массив (картинка ниже), как обратиться к элементам? Через цикл for не получается
Есть ли возможность повторно запускать Content скрипт?
Вам необходимо создать приложение для автоматизации работы погрузочных кранов, позволяющих перемещать плиты между грузовыми автомобилями...