web-dev-qa-db-ja.com

React-ユーザータイプとして電話番号をフォーマットする方法

10桁の文字列を「（123）456-7890」の形式にフォーマットする必要があります。ただし、これはユーザーが入力するときに発生する必要があります。したがって、ユーザーが3桁しか入力していない場合、入力には「（123）」と表示されます。彼らが5桁を入力した場合、入力は次のように表示されます： '（123）45'

私の現在のコードでは、フォーマットは10番目の文字が入力された後にのみ行われます。 3文字目以降からフォーマットしてほしい。

const phoneRegex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/

const handleInput = (value) => {
  return (
    value.replace(phoneRegex, '($1) $2-$3')
  )
}

class FindASubscriber extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      value: ''
    }
  }

  render() {
    const { label, placeholder, feedback } = this.props
    const { value} = this.state
    return (
      <div className="find__a__subscriber">
        <FlexGrid>
          <FlexGrid.Col>
            <FlexGrid.Row>
              <Input
                feedback={feedback}
                label={label}
                type="text"
                pattern="[0-9]*"
                placeholder={placeholder}
                value={handleInput(value)}
                maxLength="10"
                onChange={
                 (event) => this.setState({value: event.target.value})
                }
              />
            </FlexGrid.Row>
          </FlexGrid.Col>
        </FlexGrid>
      </div>
    )
  }
}```
javascriptregexreactjsvalidationformatting
4
Ozge Cokyasar

それはすべてフォーマットに関するものです。文字を印刷する任意のキー
入力フィールドを書き換える必要があります。
これにより、ユーザーは何をしても、有効なフォーマット済みフィールドのみを表示できます。

正規表現はシンプルです^\D*(\d{0,3})\D*(\d{0,3})\D*(\d{0,4})

function getFormattedPhoneNum( input ) {
  let output = "(";
  input.replace( /^\D*(\d{0,3})\D*(\d{0,3})\D*(\d{0,4})/, function( match, g1, g2, g3 )
      {
        if ( g1.length ) {
          output += g1;
          if ( g1.length == 3 ) {
              output += ")";
              if ( g2.length ) {
                  output += " " + g2; 
                  if ( g2.length == 3 ) {
                      output += " - ";
                      if ( g3.length ) {
                          output += g3;
                      }
                  }
              }
           }
        }
      }       
    );        
  return output;
 }       

console.log( getFormattedPhoneNum("") );
console.log( getFormattedPhoneNum("2") );
console.log( getFormattedPhoneNum("asdf20as3d") );
console.log( getFormattedPhoneNum("203") );
console.log( getFormattedPhoneNum("203-44") );
console.log( getFormattedPhoneNum("444sg52asdf22fd44gs") );
console.log( getFormattedPhoneNum("444sg526sdf22fd44gs") );
console.log( getFormattedPhoneNum("444sg526sdf2244gs") );
console.log( getFormattedPhoneNum(" ra098 848 73653k-atui ") );

キャラクターをどこよりも細かくしてアンダースコアを表示することもできます
いつでもあるはずです。
お気に入り
(___) ___ - ____
(20_) ___ - ____
(123) 456 - ____

など...（これが必要かどうかをお知らせください）

0
user557597