JavaScript 如何以国际方式书写手机号码
当你的网站上有来自世界各地的访问者时,按照国际标准显示手机号码等东西是一个好主意。这样他们就可以很容易地理解。
我们可以使用国际公共电信号码格式,以国际方式表示手机号码。此外,它还可以用’E-164’格式表示。
我们给出了下面的语法,以便以国际方式书写手机号码。
[+] [country code] [local phone number]
用户可以看到,国际电话号码最初包含’+’,之后是’国家代码’,而在国家代码之后则包含本地电话号码。
在这里,我们将使用正则表达式和match()方法,用JavaScript将手机号码转换为国际化的方式。
语法
用户可以按照下面的语法将手机号码转换成国际标准的格式。
let reg = /^(\d{3})(\d{3})(\d{4})$/;
let array = number.match(reg);
在上面的语法中,我们写了一个正则表达式来匹配电话号码
匹配方法返回一个包含所有匹配的数组。对于一个有效的匹配,它返回四个元素。第一个元素是整个电话号码的3位数,第二个元素是电话号码的前3位,第三个元素是电话号码的中间3位,第四个元素是有效电话号码的最后4位。
正则表达式的解释
^
– 它是正则表达式的开始。-
(\d{3})
– 它代表开头的三个数字。 -
(\d{3})
– 它代表中间的三个数字。 -
(\d{4}$)
– 它代表最后的四位数字。
例子
在下面的例子中,我们添加了数字类型的HTML输入。用户可以输入一个10位数的有效手机号码。当用户点击提交按钮时,它会执行writeInternationalNumber()函数。我们在函数中使用上述正则表达式来匹配输入值,并以数组格式获得匹配值。
之后,我们将数组值串联成一个字符串,按照国际标准写入手机号码。
<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>
例子
在下面的例子中,我们创建了国家代码的下拉值。用户可以选择任何国家,并在输入框中写一个10位数的电话号码。当用户按下按钮时,会执行cellNumberWithCountryCode()函数,该函数获取所选国家代码和电话号码的值。之后,我们创建一个像上例那样的字符串,在国际上写输入手机号码。
<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>
用户学会了按照国际标准来安排手机号码。我们使用了正则表达式来验证手机号码的有效性。如果手机号码是有效的,我们就用选定的国家代码在国际上显示它。