国际美国电话号码掩码答案

【问题标题】：International US phone number mask国际美国电话号码掩码
【发布时间】：2020-07-31 21:04:40
【问题描述】：

我正在使用 react-native-material-textfield 并且需要一种解决方案来在用户输入时实时格式化美国数字：例如从 '0000000000' 到 '+1 (000) 000-0000'。

  <TextField
      type={'custom'}
      keyboardType='numeric'
      returnKeyType='done'
      underlineColorAndroid='rgba(0,0,0,0)'
      value={this.state.maskedPhone}
      onChangeText={text => {
      this.setState({
            maskedPhone: text,
            phone: text.replace(/\D/g, '').substring(1)
      
         });
      }
      formatText={this.formatText}
  />

不知何故，我可以屏蔽文本，但没有像这样的国际代码 (+1)

formatText = text => {
   let x = text.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
   let maskedText = !x[2]
     ? x[1]
     : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');

   return maskedText;
 };

由于它是实时调用的，因此仅在字符串的开头添加“+1”并不能解决问题，因为它最终会将输入值更改为 +1 (111) 111-1111。
谢谢！

【问题讨论】：

不清楚是什么问题。您能否更清楚地解释一下输入和预期输出。
我需要输入电话号码'7777777777'并以这种方式获取'+1（777）777-7777'
好的，谢谢。仅添加“+1”并不能解决问题。 - 你是什么意思？它显示一个错误或它没有被添加？
我正在监听输入事件并在输入时调用此函数以在输入期间对其进行格式化。在开头添加“+1”会更改我的输入值，最后在每种情况下我都会得到电话号码 +1 (111) 111-1111。谢谢。
当被要求澄清时，最好编辑您的问题，而不是在 cmets 中详细说明。问题应该是独立的，不应该期望读者阅读所有的 cmets 来弄清楚你想做什么。此外，cmets 可能会被删除，可能会使您的回复毫无意义。

标签： javascript reactjs regex react-native

【解决方案1】：

const input = '1234567890';
const re = /(\d{3})(\d{3})(\d{4})/;
const output = input.replace(re, (_, a, b, c) => `+1 (${a}) ${b}-${c}`);
console.log(output); // +1 (123) 456-7890

【讨论】：

这仅在输入 10 位数字时有效，在该数字未格式化之前，如果用户在此之后继续输入，数字应该仍然是 10，不会像这样 +1 (123) 456-+1 (123) 456-7899
如果您想要一个在用户输入数字时实时运行的解决方案，请使用实时代码 sn-p 更新您的问题，实现您迄今为止尝试过的内容（包括文本框）。您的问题根本不清楚您是否需要实时解决方案。
感谢您的通知，我已更新我的问题以使其更加清晰。