正則表達式允許用戶輸入任何符號

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

但是當我返回 'emptyMask' 時，它會顯示我實際的掩碼正則表達式。 我在哪里犯錯？

Answer 1

我認為您誤解了MaskedInput組件的工作原理。

MaskedInput的掩碼格式字符串不是正則表達式。 這是一個用戶友好的字符串。 您可以使用"11-11"類的字符串，它等效於正則表達式/^\d\d-\d\d$/ 。

此格式字符串有一些開箱即用的字符—— 1 、 a 、 A 、 *和#表示字符類別（例如： 1表示任何數字）和符號（例如-或/表示它們自己）。

您可以定義自己的符號類，這就是您對w和W所做的事情——您將這些類定義為任何匹配正則表達式[\wа-яА-Я \-0-9.@] 。

但是，要屏蔽 40 倍自定義字符 class，您不能使用W{40} ，因為{40}對正則表達式有效，但對屏蔽字符串無效。 請記住，掩碼不是正則表達式。 因此，如果您想要一個匹配 40 倍W class 的掩碼，您需要使用"WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW"或"W".repeat(40) 。