1
votes

Comment utiliser correctement ce code pour remplacer toutes les occurrences de plus d'un élément décimal par un seul?

J'ai construit une calculatrice dans ReactJs. Et je voudrais empêcher l'utilisateur d'entrer plus d'un élément décimal, par exemple 2..3 Chaque fois qu'un utilisateur fait cela, je voudrais remplacer tous les éléments décimaux par un seul. Donc 2..3 deviendrait 2.3

Voici comment j'essaie d'y parvenir mais cela ne fonctionne pas

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

setCalc est le hook que j'utilise pour changer d'état.

javascript reactjs regex replace

7 commentaires

Mieux vaut simplement marquer l'entrée comme invalide au lieu d'interférer avec l'utilisateur qui tape.

Tout d'abord, donnez toujours plus d'informations que "ça ne marche pas". Deuxièmement, il est probablement préférable de simplement le marquer comme invalide et de les empêcher de soumettre ou de calculer ou quoi que ce soit, ou de vérifier une deuxième décimale avant de mettre à jour la valeur de l'état. Étant donné que le faire après peut être déroutant, car il n'est peut-être pas clair quel est le bon point décimal à conserver et lesquels doivent être supprimés

Je ne vois pas ce qui ne va pas, le regex semble fonctionner correctement. Que sont calc et setCalc , pouvez-vous afficher le code complet s'il vous plaît? C'est étrange que vous ayez cet accès supplémentaire à la propriété .input .

Cela aurait été mon approche originale. Mais je le fais dans le cadre des projets de certification freeCodeCamp et l'une des exigences est d'empêcher l'utilisateur de le faire.

@ Berto99 La bonne approche serait /.../.test(calc.input) , mais en réalité le code OP fonctionne déjà à cet égard.

@Bergi techniquement non, si vous essayez le regex sur comme 2.3. cela ne supprimera pas le deuxième point décimal. Il ne recherche que des consécutifs

@ Jayce444 c'est en fait vrai. Merci d'avoir fait remarquer cela. J'aurais donné plus d'informations si j'avais compris pourquoi cela n'a pas fonctionné. Je l'ai testé en déconnectant une chaîne chaque fois que plusieurs décimales sont entrées. Il a continué à enregistrer avec chaque entrée après la deuxième valeur décimale a été entrée

3 Réponses :

-2
votes

Essayez ceci ...

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);

1 commentaires

Merci pour l'effort compagnon. J'avais déjà utilisé cette approche. Ça n'a pas marché.

1
votes

Cela devrait aider. Cela empêche essentiellement l'entrée de se produire si nous trouvons déjà un décimal dans la chaîne lorsque vous appuyez sur une touche.

<input type="text">

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('.') && e.key == '.') e.preventDefault();
});

3 commentaires

Merci. Laissez-moi essayer de réécrire cette approche dans ReactJs

Avec cette approche, un utilisateur peut toujours saisir une valeur non valide en la collant dans le champ.

@JemiSalo est correct, auquel cas il faudrait également un événement pour input ou change . Cependant, l'OP a demandé si un utilisateur saisissait une valeur.

0
votes

Je me suis souvenu que les chaînes sont immuables et que pour changer la valeur de calc.input , je devrais le réaffecter à lui-même. Et donc cette approche a fonctionné pour moi pour ce cas d'utilisation particulier.

Notez que cela n'empêche pas la saisie sous la forme 9.9.9

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

p >

0 commentaires