Как мне правильно использовать этот код, чтобы заменить все вхождения более чем одного десятичного элемента одним?

#javascript #reactjs #regex #replace

#javascript #reactjs #регулярное выражение #заменить

Вопрос:

Я создал калькулятор в ReactJS. И я хотел бы запретить пользователю вводить более одного десятичного элемента, например, 2..3 Всякий раз, когда пользователь делает это, я хотел бы заменить все десятичные элементы одним. Так 2..3 стало бы 2.3

Вот как я пытаюсь достичь этого, но это не работает

 if (calc.input.match(/.{2,}/g)) {
  setCalc(calc.input.replace(/.{2,}/g, "."));
}

setCalc это перехват, который я использую для изменения состояния.

1. Лучше просто пометьте ввод как недопустимый, вместо того, чтобы мешать пользователю вводить текст.

2. Во-первых, всегда предоставляйте больше информации, чем «это не работает». Во-вторых, вероятно, лучше либо просто пометить его как недопустимый и запретить им отправлять, вычислять или что-то еще, либо проверять наличие второго десятичного перед обновлением значения состояния. Поскольку выполнение этого после может сбить с толку, поскольку может быть неясно, какую правильную десятичную точку следует сохранить, а какие следует удалить

3. Я не вижу, что в этом плохого, регулярное выражение, кажется, работает нормально. Что такое calc и setCalc , не могли бы вы показать весь код, пожалуйста? Странно, что у вас есть этот дополнительный .input доступ к свойству.

4. Это был бы мой первоначальный подход. Но я делаю это в качестве одного из проектов сертификации freeCodeCamp, и одно из требований — запретить пользователю делать это.

5. @Berto99 Правильным подходом было бы /…/.test(calc.input) , но на самом деле код OPs уже работает в этом отношении.

Ответ №1:

Это должно помочь. Это в основном предотвращает ввод, если мы уже нашли десятичное число в строке при нажатии клавиши.

 const text = document.querySelector('input[type="text"]');
text.addEventListener('keypress', e => {
  // if the text already includes a decimal, and our current key is a decimal, prevent the new key from being added.
  if (text.value.includes('.') amp;amp; e.key == '.') e.preventDefault();
});

 <input type="text">

1. Спасибо. Позвольте мне попробовать переписать этот подход в ReactJS

2. При таком подходе пользователь все еще может ввести недопустимое значение, вставив его в поле.

3. @JemiSalo правильно, в этом случае также должно было бы быть событие для input or change . Однако OP спросил о пользователе, вводящем значение.

Ответ №2:

Вспомнил, что строки неизменяемы, и поэтому, чтобы изменить значение calc.input , мне пришлось бы переназначить его самому себе. И таким образом, этот подход сработал для меня в данном конкретном случае использования.

Обратите внимание, что это не препятствует вводу в форме 9.9.9

 if (calc.input.match(/.{2,}/g)) {
  setCalc(calc.input = calc.input.replace(/.{2,}/g, "."));
}

Ответ №3:

Попробуйте это…

 var S='456...........876';

S=S.replace(/. /g,'.');  // I escape the period with a slash and place the   next to it to mean "all".

document.write(S);