I am learning regex and I want to implement this in react app so when I write something on input field I want to allow user to write only numbers and maximum one space. This string also must starts with + character. My regex tool shows me good result but in app I cannot write anything.

const handlePhone = ({currentTarget}) => {
    let val = currentTarget.value;
    // Regular expression
    const reg = /^\+\d+/g;
    const isNumber = val.match(reg);
    if (isNumber || val === '') {
      setFieldValue('phone', val);
    }
  };

With this expression I wanted to implement this: starts with + and later you can write some digits.

But in app I cannot write anything. Why this tool is so different from this live matching?

With this:

const reg = /^\+\d+( \d+)*$/;

I am learning regex and I want to implement this in react app so when I write something on input field I want to allow user to write only numbers and maximum one space. This string also must starts with + character. My regex tool shows me good result but in app I cannot write anything.

const handlePhone = ({currentTarget}) => {
    let val = currentTarget.value;
    // Regular expression
    const reg = /^\+\d+/g;
    const isNumber = val.match(reg);
    if (isNumber || val === '') {
      setFieldValue('phone', val);
    }
  };

With this expression I wanted to implement this: starts with + and later you can write some digits.

But in app I cannot write anything. Why this tool is so different from this live matching?

With this:

const reg = /^\+\d+( \d+)*$/;

• javascript
• regex
• reactjs

• Because your regex requires + and 1 digit to be already present. Change to const reg = /^\+\d*(?:\s\d*)?$/;. Also, it will only work for live validation. You will probably need another regex for on-submit validation, like const reg = /^\+\d+(?:\s\d+)?$/;. Also, it makes sense to use RegExp#test(String) to check if a string matches a regex. – Wiktor Stribiżew Commented Sep 10, 2019 at 12:50
• so you are calling this with keypress, up, down, funkychickendance? – epascarello Commented Sep 10, 2019 at 12:52
• I am calling this with onChange method from Formik library – Freestyle09 Commented Sep 10, 2019 at 13:11

4 Answers 4

This should work:

^\+?\d+( \d+)?$

• ^ - start anchor
• \+? - optionally start with a plus sign
• \d+ - require at least one digit to follow
• ( \d+)? - Optionally allow a space which must be followed by one or more digits
• $ - end anchor

https://regex101./r/pxbefb/1

I think you need something really simple like /^\+\d* ?\d*$/ which means:

• ^\+ starts with '+'
• \d* then zero or more digits
• ? (space?) then zero or one space
• \d* then zero or more digits
• $ end of string

E.g.

function checkValue(el) {
  let re = /^\+\d* ?\d*$/;
  document.getElementById('err').textContent = re.test(el.value)? 'good':'bad';
}

<input oninput="checkValue(this)"><br>
<span id="err"></span>

Try out this regex , And also check the regex in this LINK

const reg = /^\+\d+ \d+$/gm;

^+ :- will check that string is starting with +.
\d+ :- this will allow 1 or more digits
\s :- This will allow only one space .
$ :- this will ensure that string ends with digit and this will restrict the second use of space character .

My Regex is pretty bloated but it should work.

const regex = \^\+[\d]+(\s)*(\d)+$\g;

1. ^+ just negates the power of +
2. [\d]+ is letting you pick 0-9 digits 1 or more times
3. (\s)* is a group and it allows for 0 or 1 space
4. (\d)+$ can pick digits between 0-9 one or more time. And $ is just the end anchor