How to write a mobile number in an international way using JavaScript?-JS Tutorial-php.cn

How to write a mobile number in an international way using JavaScript?

WBOY

Release： 2023-08-25 13:41:11

forward

1734 people have browsed it

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

When you have visitors from all over the world on your website, it is best to display information such as mobile phone numbers according to international standards. So they are easy to understand.

We can represent mobile phone numbers in an international manner using the International Public Telecommunications Numbering Format. Additionally, it is represented in "E-164" format.

We have given the following syntax for writing mobile numbers in international way.

[+] [country code] [local phone number]

Copy after login

Users can see that international phone numbers include " " in front of them, "country/region code" after them, and local phone numbers after the country/region code.

Here, we will use regular expressions and the match() method to convert mobile phone numbers in an international way using JavaScript.

grammar

Users can convert mobile phone numbers to international standard format according to the following syntax.

let reg = /^(\d{3})(\d{3})(\d{4})$/;
let array = number.match(reg);

Copy after login

In the above syntax, we wrote the regular expression to match the phone number

The match method returns an array of all matches. For a valid match, it returns four elements. The first element is the entire 3-digit phone number, the second element is the first three digits of the phone number, the third element is the middle three digits of the phone number, and the fourth element is the last four digits of a valid number.

Regular expression explanation

^ − This is the beginning of the regular expression.
(\d{3}) - It represents the first three digits.
(\d{3}) - represents the middle three digits.
(\d{4}$) - It represents the last four digits.

Example

In the example below, we have added an HTML input of type number. Users can enter a valid 10-digit mobile phone number. When the user clicks the submit button, it executes the writeInternationalNumber() function. We use the above regular expression in the function to match the input values and get the matched values in array format.

After that, we concatenate the array values into a single string to write the mobile number according to international standards.

<html>
<body>
   <h3>Using the <i> Regular expression </i> to write a cell phone number in an international way in JavaScript </h3>
   <p>Enter phone number:</p>
   <input type = "number" id = "cell">
   <div id = "content"></div>
   <button id = "btn" onclick = "writeInternationalNumber()"> Submit</button>
   <script>
      let content = document.getElementById('content');
      
      // function to write a cell phone number in the international format
      function writeInternationalNumber() {
         let cell = document.getElementById('cell');
         let number = cell.value;
         let reg = /^(\d{3})(\d{3})(\d{4})$/;
         let array = number.match(reg);
         if(array == null) {
            content.innerHTML = "Please enter a valid phone number";
            return;
         }
         let internationalNumber = '+91' + ' (' + array[1] + ') ' + array[2] + '-' + array[3];
         content.innerHTML = "The converted phone number is " + internationalNumber;
      }
   </script>
</body>
</html>

Copy after login

Example

In the example below, we have created a drop-down list of country codes using their values. Users can select any country and write a 10-digit phone number in the input box. When the user presses the button, it executes the cellNumberWithCountryCode() function, which gets the value of the selected country code and phone number. After that, we create a string as shown in the above example to write the entered international mobile number.

<html>
<body>
   <h3>Using the <i> Regular expression </i> to write a cell phone number in an international way in JavaScript </h3>
   <select name = "country_code" id = "codes">
      <option value = "+91" selected> India (+91) </option>
      <option value = "+355"> Albania (+355) </option> 
      <option value = "+1"> USA (+1) </option>
      <option value = "+43"> Austria (+43) </option>
      <option value = "+86"> China (+86) </option>
      <option value = "+81"> Japan (+81) </option>
      <option value = "+31"> Netherlands (+31) </option>
      <option value = "+263"> Zimbabwe (+263) </option>
   </select>
   <input type = "number" id = "cell"> <br>
   <div id = "content"> </div> <br>
   <button id = "btn" onclick = "cellNumberWithCountryCode()"> Submit</button>
   <script>
      let content = document.getElementById('content');
      
      // function to write a cell phone number in the international format
      function cellNumberWithCountryCode() {
         let cell = document.getElementById('cell');
         let number = cell.value;
         let reg = /^(\d{3})(\d{3})(\d{4})$/;
         
         // get the country code from the dropdown
         let country_code = document.getElementById('codes').value;
         let array = number.match(reg);
         if (array == null) {
            content.innerHTML = "Please enter a valid phone number";
            return;
         }
         let internationalNumber = country_code + ' (' + array[1] + ') ' + array[2] + '-' + array[3];
         content.innerHTML = "The converted phone number is " + internationalNumber; 
      }
   </script>
</body>
</html>

Copy after login

Users learned to arrange mobile phone numbers according to international standards. We use regular expressions to validate mobile numbers. If the phone number is valid, we will display it internationally along with the selected country code.

The above is the detailed content of How to write a mobile number in an international way using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!