如何使用 JavaScript 以国际方式编写手机号码？

1. 前言

在开发时，我们经常遇到需要根据国际方式来编写手机号码的需求。随着全球通讯的日益普及，电话号码已不再是简单的11位数字串。本文将介绍如何使用 JavaScript 在网页上以国际方式编写手机号码。

2. 相关知识点

2.1 国际电话格式

国际电话格式由各国电话号码方案决定，但遵循国际标准 E.164。E.164 定义了电话号码的标准格式，包括国家代码、地区代码和用户号码。其格式为：

+ 国家代码 [地区代码] 用户号码

其中，国家代码和地区代码可以用“+”号替代，用户号码不得超过15位数字，没有括号或破折号。

2.2 JavaScript 正则表达式

正则表达式是一种用于匹配字符串的强力工具。它可以用来验证、搜索和替换特定文本。可以使用正则表达式将字符串中的字符与模式匹配，而不是将每个字符迭代一遍。

3. 方法介绍

3.1 formatPhoneNumber

定义一个名为 formatPhoneNumber 的函数，用于将用户输入的电话号码转换为国际电话格式。

function formatPhoneNumber(phoneNumber) {
  // Regular expression for matching a phone number
  const phoneRegex = /^(\+?)([\d]{1,3})([\d]{1,3})?([\d]+)$/;
  const cleanPhoneNumber = phoneNumber.replace(/\D+/g, '');
  const matches = cleanPhoneNumber.match(phoneRegex);
  if (matches) {
    const country = matches[2];
    const area = matches[3] || '';
    const number = matches[4];
    return `+${country}${area}${number}`;
  }
  return null;
}

上述代码中，我们定义了一个正则表达式用于匹配电话号码，包括国家代码、地区代码和用户号码。使用 replace 方法去掉所有非数字字符，同时使用 match 方法与正则表达式匹配，得到一个数组 matches，其中：

matches[0] 匹配整个正则表达式的子字符串。

matches[1] 匹配第一个括号内的子字符串，即加号。

matches[2] 匹配第二个括号内的子字符串，即国家代码。

matches[3] 匹配第三个括号内的子字符串，即地区代码（如果有）。

matches[4] 匹配第四个括号内的子字符串，即用户号码。

最后，我们将匹配的结果以国际电话格式返回。

3.2 事件监听

将 formatPhoneNumber 函数绑定到 input 元素的输入事件上，使得用户输入电话号码时，能够及时地将其转换为国际电话格式。

const phoneInput = document.querySelector('#phone');
phoneInput.addEventListener('input', () => {
  const formattedPhoneNumber = formatPhoneNumber(phoneInput.value);
  if (formattedPhoneNumber) {
    phoneInput.value = formattedPhoneNumber;
  }
});

上述代码中，我们首先获取 id 为 phone 的 input 元素，然后将 formatPhoneNumber 函数绑定到其输入事件上。每次用户输入时，调用 formatPhoneNumber 函数转换电话号码，并在 input 元素中显示转换后的结果。

4. 完整代码

function formatPhoneNumber(phoneNumber) {
  const phoneRegex = /^(\+?)([\d]{1,3})([\d]{1,3})?([\d]+)$/;
  const cleanPhoneNumber = phoneNumber.replace(/\D+/g, '');
  const matches = cleanPhoneNumber.match(phoneRegex);
  if (matches) {
    const country = matches[2];
    const area = matches[3] || '';
    const number = matches[4];
    return `+${country}${area}${number}`;
  }
  return null;
}
const phoneInput = document.querySelector('#phone');
phoneInput.addEventListener('input', () => {
  const formattedPhoneNumber = formatPhoneNumber(phoneInput.value);
  if (formattedPhoneNumber) {
    phoneInput.value = formattedPhoneNumber;
  }
});

5. 总结

使用 JavaScript 以国际方式编写手机号码的方法，需要使用正则表达式将用户输入的电话号码转换为国际电话格式，并将其绑定到输入事件上，以便及时地将电话号码转换为国际电话格式。

除此之外，还需要了解 E.164 国际电话格式的相关知识点，保证转换后的电话号码格式正确。