根据数据动态屏蔽输入

Question

我有一个回复 returns“XXX-XXX”或“XX-XXXX”

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

基本上，我想看到 formatUnitCode("123456", "XX-XXX") --> "12-3456"

我不想使用 if else，因为它将来可能会以 XX-XX-XX 的形式出现

有人可以帮我创建这个功能吗？

我尝试使用正则表达式，但我认为不可能传递变量而不是 {2} 和 {4}

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

Answer 1

您不能在 RegExp 文字中使用变量，但是当您使用 RegExp() 构造函数将模式构建为字符串时可以。

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('-'));
};

console.log() ptn var 看看那里发生了什么很有启发性。我们正在使用您基于“X”的任意格式来派生一个新的动态 RegExp，它将在 multi-match RegExp 中用于获取零件。

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

Answer 2

您可以使用简单的 for 循环制作动态字符串格式化方法。

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

Answer 3

这是你想做的吗？

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

Answer 4

无论使用何种字母，这都适用于任何掩码（您可以通过更改匹配器正则表达式来控制该行为）。就我个人而言，我认为这是一种比仅仅尝试将给定掩码与正则表达式相匹配的更灵活的方法。

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"

Answer 5

您可以使用模板文字将参数传递给您的正则表达式：

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, "-");
} 

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

根据数据动态屏蔽输入

Dynamic masked input according to data

javascript

regex

maskedinput