Function doesn't convert parentheses to minus

Question

 import React from "react"; import "./styles.css"; import numeral from "numeral"; const value_regex = /(-?\d+,?\.?(\d+)?)+/; const format_dec = "0.00"; const formatIssue = (value, format = "0,0.00") => { if (value) { try { return numeral(value).format(format); } catch (e) { return value; } } return value; }; function onValueChange(evt) { if (evt.target.value) { try { const numericValue = evt.target.value.match(value_regex)[0]; console.log("value", formatIssue(numericValue, format_dec)); return formatIssue(numericValue, format_dec); } catch (e) { return evt.target.value; } } else { return evt.target.value; } } export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <form> <label> <input type="text" name="name" onBlur={onValueChange} /> </label> </form> </div> ); }

 <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I'm trying to allow input to display values that regex match but is not doing that if values comes like ($200.00). If values comes like ($200.00) it should format to -200.00. The issue is if it's possible to allow it doing that without changing 'value_regex'

(-?\d+,?\.?(\d+)?)+

https://regex101.com/r/l3gc3N/1

My code is: https://codesandbox.io/s/inspiring-moon-1dz6n?file=/src/App.js:88-99

Answer 1

Although you write that you don't want the regex to be changed, I really think a change is called for.

Of course, it should not diminish any of its current functionality, and that you can achieve by using a pipe ( | ) followed by an alternative pattern.

So if we don't touch what is already in the regex, it would extend to this:

const value_regex = /(-?\d+,?\.?(\d+)?)+|\(\$?(\d+,?\.?(\d+)?)+\)/;

Although I would really want to change your currrent regex a bit -- but I leave that to you -- so that it would become:

const value_regex = /-?\d+[,.]?\d*|\(\$?\d+[,.]?\d*\)/;

...because:

• (\d+)? is really \d* , but without capture group (which you don't reference any way).
• I suspect that with ,?\.? you really intended to say that the decimal separator can be either a comma or a point, while this would actually allow ,. as well. So I would replace it with [,.]? .
• The outer ()+ would allow a number to have several - in them, and as many decimal separators, which is not really how we write numbers.

With either of these, you then just need to add this line to your code:

if (numericValue[0] === "(") numericValue = "-" + numericValue.slice(1);

If your regex is also used in other contexts, then just make this value_regex a local variable in your event handler. That way it will not affect any other dependencies.