Dynamic masked input according to data

Question

I have a response and it returns "XXX-XXX" or "XX-XXXX"

const formatUnitCode = (value, format) => {}

So basically, I want to see as formatUnitCode("123456", "XX-XXX") --> "12-3456"

I don't want to use if else because it may come in the future as XX-XX-XX

Can someone help me create this function?

I tried to do with regex but I think it is not possible to pass variable instead of {2} and {4}

const formatCode = (val) => val.replace(/(\d{2})(\d{4})/g, "$1-$2");

It would be polite to upvote or in the very least acknowledge answers, particularly if they solve your problem. — Mitya, Nov 01 '20 at 16:44

Mitya · Answer 1 · 2020-11-01T13:05:26.500

You can't use variables in RegExp literals, but you can when you use the RegExp() constructor to build the pattern as a string instead.

const formatStr = (val, format) => {
  let ptn = format.split('-').map(part => '(.{'+part.length+'})').join('');
      match = val.match(new RegExp(ptn));
  match && console.log(match.slice(1).join('-'));
};

It's instructive to console.log() the ptn var to see what's happening there. We're using your arbitrary "X"-based format to derive a new, dynamic RegExp which will be used in a multi-match RegExp to grab the parts.

formatStr('123456', 'xxx-xxx'); //"123-456"
formatStr('123456', 'xx-xxxx'); //"12-3456"

score 0 · Answer 2 · answered Nov 01 '20 at 13:03

You can use simple for loop make a dynamic string format method.

const formatUnitCode = (str, format) => {
  let result = '';
  let j = 0;
  for (let i = 0, l = format.length; i < l; i += 1) {
    if (format[i] === 'X') {
      result += str[j];
      j += 1;
    } else result += format[i];
  }
  for (; j < str.length; j += 1) result += str[j];
  return result;
};

console.log(formatUnitCode('123456', 'XX-XXX'));
console.log(formatUnitCode('123456', 'XXX-XXX'));
console.log(formatUnitCode('123456', 'XX-XXXX'));
console.log(formatUnitCode('123456', 'XX-XX-XX'));

hoge · Accepted Answer · 2020-11-01T13:18:08.887

0

Is this what you would like to do?

const func = (val, first_digit) => {
    let regex = new RegExp("(\\d{" + first_digit + "})(\\d{" + (6-first_digit) + "})","g");
    return val.replace(regex,"$1-$2");
};

edited Nov 01 '20 at 13:18

answered Nov 01 '20 at 13:07

hoge

82
5

lacrit · Answer 4 · 2020-11-02T15:52:28.153

This should work for any mask regardless of the letters used (you can control that behaviour by changing matcher regex). Personally, I think it's a more elastic approach than just trying to match the given mask with a regex.

const replaceWithFiller = (filler, str, matcher = /[a-zA-z]/g) => {
  const arr = filler.split('');
  return  str.replace(matcher, () => arr.shift());
};


console.log(replaceWithFiller('123456', 'XXX-XXX')); //"123-456"
console.log(replaceWithFiller('123456', 'XX-XX-XX')); // "12-34-56"
console.log(replaceWithFiller('123456', 'XX-XXXX')); //"12-3456"
console.log(replaceWithFiller('123456', 'aa-aaaa')); // also "12-3456"

Karim · Answer 5 · 2020-11-08T11:26:20.647

you can pass parameters to your regex using template literals:

const formatCode = (val, format) => {
  const lengthFirstBlock = format.indexOf('-');
  const lehgthSecondBlock = format.length - format.indexOf('-');
  const regex = new RegExp(`(\\d{${lengthFirstBlock}})(\\d{${lehgthSecondBlock}})`, 'g');
  return val.replace(regex, "$1-$2");
} 

console.log(formatCode("123456", "XX-XXX"))
console.log(formatCode("123456", "XXX-XX"))

Dynamic masked input according to data

5 Answers5