用于向电话号码添加拨号代码的正则表达式

Question

嘿，我是正则表达式的初学者，我无法弄清楚这一点。 什么是将拨号代码（420）添加到电话号码（此处为“tel”state变量）的正则表达式如果缺少/添加加号如果缺少/如果已经有12个号码，则将前三个变成拨号代码。 以下是所需的输出：

123456789 --> +420 123 456 789

(+420) 12 34567 89 --> +420 123 456 789

+420-123456789 --> +420 123 456 789

+987123456789 --> +987 123 456 789

420123456789 --> +420 123 456 789

import React, { useContext, useState, useEffect } from "react";
import DataContext from "../store/data-context";


function Form() {
  const [name, setName] = useState("");
  const [secName, setSecName] = useState("");
  const [tel, setTel] = useState("");
  const [note, setNote] = useState("");
  const [state, setState] = useState({
    name: "",
    secName: "",
    tel: "",
    note: "",
  });
  

  const { dispatchDataState } = useContext(DataContext);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(name);
    
    const payload={...state, tel:  state.tel.replace(/[^+\d]+/g, "").split('').reverse().join('').replace(/([0-9]{3})/g, "$1 ").split('').reverse().join('')}
    console.log(state)
    console.log(tel)
    dispatchDataState({ type: "ADD_DATA", payload:payload});
    setState(
      {
        name: "",
        secName: "",
        tel: "",
        note: "",
      }
    )
    console.log(state);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Jméno
          <input
            type="text"
            required
            value={state.name}
            onChange={(e) => setState({ ... state, name: e.target.value })}
          />
        </label>
        <label>
          Příjmení
          <input
            type="text"
            required
            value={state.secName}
            onChange={(e) => setState({ ... state, secName: e.target.value })}
          />
        </label>
        <label>
          Telefonní číslo
          <input
            type="text"
            required
            value={state.tel}
            onChange={(e) => setState({ ... state, tel: e.target.value })}
            
          />
        </label>
        <label>
          Poznámka
          <input
            type="text"
            value={state.note}
            onChange={(e) => setState({ ... state, note: e.target.value })}
          />
        </label>
        <input type="submit" value="Odeslat" />
      </form>
    </div>
  );
}

export default Form;

Answer 1

您可以使用intl-tel-input package 来实现此功能，而不是自己实现逻辑。

这是一个流行的零依赖 package 具有：

• 每个国家的拨号代码前缀
• 每个国家的旗帜图像
• 用户输入的可选验证