Skip to content
Advertisement

JavaScript: How to reduce IFs with REGEX

I’m working on the following function which I had to add a few IFs in case the string was shorter than the format the REGEX groups was expecting:

function getFormatedCPF(unformatedValue) {
    const onlyDigits = unformatedValue.toString().replace(/[^d]/g, "").substring(0, 11);

    if (onlyDigits.length > 9) return onlyDigits.replace(/(d{3})(d{3})(d{3})/, "$1.$2.$3-");
    if (onlyDigits.length > 6) return onlyDigits.replace(/(d{3})(d{3})/, "$1.$2.");
    if (onlyDigits.length > 3) return onlyDigits.replace(/(d{3})/, "$1.");

    return onlyDigits;
}

Is there a way to remove the IFs and get the same output with just Regex? I’m looking for something like: complete: 999.999.999-99 partial: 999.999.9 Because the function will be called when the person is typing.

Advertisement

Answer

You can use

const rx = /^(d{3})(d{1,3})?(d{1,3})?(d{1,2})?.*/;

$('body').on('input', '.val', function(e) {
  this.value = this.value.replace(/D+/g,'')
    .replace(rx, (_,w,x,y,z) =>
      z ? `${w}.${x}.${y}-${z}` :
      y ? `${w}.${x}.${y}` :
      x ? `${w}.${x}` : w);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="val" />

Note that ^(d{3})(d{1,3})?(d{1,3})?(d{1,2})?.* regex matches and captures into Group 1 all three digits (else, there is no sense adding .), then one, two or three digits are captured into an optional Group 2 (one digit must be there, or again, there is no need to insert a separator), same goes for Group 3 and there are only one or two digits that are captured into Group 4. The .* at the end matches anything there is left to trim it off.

The replacement is done within an arrow function, where the replacement text is built dynamically, based on which group matched or not.

Advertisement