允许用户键入任何符号的正则表达式

Question

我正在使用 react-maskedinput 并且它接受正则表达式作为掩码。我从后端获取掩码。有时掩码是空的，我需要设置默认掩码。如果它是空的，我想允许用户输入任意 40 个符号。

export function getMaskForInput(mask) {
  const newMask = mask.toString().replace(/`9/g, 'q').replace(/9/g, '1').replace(/q/g, '`9');
  const emptyMask = '/\W{40}/g';  // probably not correct expression
  if (mask) {
    return newMask.replace(/`/g, '\').replace('$', '');
  }
  console.log('empty mask');

  return emptyMask;
}

const mask = getMaskForInput(maskEdit)

<MaskedInput
  mask={mask}
  type="tel"
  id="account"
  autoComplete="off"
  maxLength={40}
  placeholder="№ лицевого счета"
  placeholderChar=" "
  onChange={(e) => this.handleOnAccountChange(e.target.value.trim())}
  value={this.state.account}
  formatCharacters={{
     W: {
     validate(char) { return /[\wа-яА-Я \-0-9.@]/.test(char); },
     },
     w: {
     validate(char) { return /[\wа-яА-Я \-0-9.@]/.test(char); },
     }
}}
/>

但是当我 return 'emptyMask' 它显示了我实际的 mask 正则表达式。我哪里出错了？

Answer 1

我认为您误解了 MaskedInput 组件的工作原理。

MaskedInput 的掩码格式字符串不是正则表达式。这是一个用户友好的 字符串 。您可以使用 "11-11" 这样的字符串，它等同于正则表达式 /^\d\d-\d\d$/.

这个格式字符串有一些characters you can use out of the box——1、a、A、*和#代表classes 字符（例如：1 代表任何数字）和符号（例如 - 或 / 代表它们自己）。

您可以定义自己的符号 classes，这就是您对 w 和 W 所做的 — 您将这些 classes 定义为匹配正则表达式 [\wа-яА-Я \-0-9.@].

的任何内容

然而，要屏蔽 40× 您的自定义字符 class，您不能使用 W{40}，因为 {40} 对正则表达式有效，但对屏蔽字符串无效。请记住，掩码不是正则表达式。所以如果你想要匹配 40× W class 的掩码，你需要使用 "WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW" 或 "W".repeat(40).

允许用户键入任何符号的正则表达式

regex expression to allow user type any symbols

javascript

regex

input-mask

reactjs