时间戳

首页 > 解决方案 > 自动在电话号码中添加连字符，例如 111-111-1111

javascript - 自动在电话号码中添加连字符，例如 111-111-1111

问题描述

当用户输入 number 时，我想在电话号码中添加连字符。

电话格式应类似于 111-111-1111。

我已经编写了代码，但无法生成模式。

一点帮助将不胜感激。

<html>
<head>
    <title>Add Hyphen to a text using JavaScript</title>
</head>

<body>
    <p>Type some values (numbers or text) in the text box. 
        The script will automatically add a "hyphen" (-) after every 3rd character.</p>
    <p>The onkeyup event calls a JavaScript fuction after you release the key in text box.</p>
    
    <div>
        <input type="text" id="tbNum" onkeyup="addHyphen(this)"
            placeholder="Type some values here" maxLength="12"/>
    </div>
</body>

<script>
	function addHyphen (element) {
    	let ele = document.getElementById(element.id);
        ele = ele.value.split('-').join('');    // Remove dash (-) if mistakenly entered.

        let finalVal = ele.match(/.{1,4}/g).join('-');
        document.getElementById(element.id).value = finalVal;
    }
</script>
</html>

标签： javascript

解决方案

它相当混乱，但你可以使用正则表达式和替换来做到这一点：

console.log('1111111111'.replace(/(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)/, '$1$2$3-$4$5$6-$7$8$9$10'))

此代码片段捕获每个数字，然后用于'$n'查找第 n 个数字并插入'-'到适当的位置。

请注意，您不能使用/(\d){10}/or/\d{10}/因为每个数字都需要被捕获。

所有考虑的事情（如评论中所述）<input type="tel"/>可能是最好的方法。

完整片段：

<html>
<head>
    <title>Add Hyphen to a text using JavaScript</title>
</head>

<body>
    <p>Type some values (numbers or text) in the text box. 
        The script will automatically add a "hyphen" (-) after every 3rd character.</p>
    <p>The onkeyup event calls a JavaScript fuction after you release the key in text box.</p>
    
    <div>
        <input type="text" id="tbNum" onkeyup="addHyphen(this)"
            placeholder="Type some values here" maxLength="10"/>
    </div>
</body>

<script>
	function addHyphen (element) {
    	let ele = document.getElementById(element.id);
        ele = ele.value.split('-').join('');    // Remove dash (-) if mistakenly entered.

        let finalVal = ele.replace(/(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)/, '$1$2$3-$4$5$6-$7$8$9$10')
        document.getElementById(element.id).value = finalVal;
    }
</script>
</html>

此外，由于正则表达式的性质，只有在文本中包含正确数量的数字时才会添加连字符。如果您只想每三个数字添加连字符，而不仅仅是在有正确数量的数字时，请更改此：

ele.replace(/(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)/, '$1$2$3-$4$5$6-$7$8$9$10')

对此：

ele.replace(/(\d)(\d)(\d)(?!$)/g, '$1$2$3-')

最后说明： 您可以在上面的评论中重构一些事情（尽管它可能会稍微降低您的代码可读性），即更改此：

function addHyphen (element) {
        let ele = document.getElementById(element.id);
        ele = ele.value.split('-').join('');    // Remove dash (-) if mistakenly entered.

        let finalVal = ele.replace(/(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)/, '$1$2$3-$4$5$6-$7$8$9$10')
        document.getElementById(element.id).value = finalVal;

对此：

const addHyphen = element => element.value = element.value.replace(/([^\d])/g, '').replace(/(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)/, '$1$2$3-$4$5$6-$7$8$9$10');

推荐阅读