Считывание текста в textarea

201
20 декабря 2018, 16:10

Вообщем, народ, у меня есть такая проблема: если в поле textarea вводят слово "чек/чеки" c любым регистром и суммы (каждая в новой строке), например:

4,5 
6р. 
7руб 
34.67 руб 
65,3 р.

как-то все это дело считать. Но, я в JS плох, и к тому же, тут надо применять регулярку для маски сумм, а с этим у меня вообще большие проблемы. Обработчик должен быть на keyup или focusout. После, надо в функции все это дело проверять. Ну, как-тот так. Помогите, пожалуйста.

Answer 1

Надеюсь, что в моём примере, Вы найдёте решение вашей проблемы. Я специально не стал сокращать и оптимизировать "регулярки", чтобы было нагляднее. Сложности нет никакой, код тоже небольшой, ибо половина - комментарии.

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. Если найдёте ошибки, то прокомментируйте - попробуем исправить)

Answer 2

Просто числа вывести?

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>

READ ALSO
Обращение к элементам массива

Обращение к элементам массива

Мне на выходе дается такой массив (картинка ниже), как обратиться к элементам? Через цикл for не получается

169
Повторный запуск Content Script. Chrome Extension

Повторный запуск Content Script. Chrome Extension

Есть ли возможность повторно запускать Content скрипт?

154
Аналог оператора spread

Аналог оператора spread

Читаю про ES-2015 на http://learnjavascript

156
Какой алгоритм перемещения? JS

Какой алгоритм перемещения? JS

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

174