Question

在javascript中插入连字符的最简单方法是什么？

我有一个电话号码，例如：1234567890

在前端显示时，我必须使用javascript将其显示为123-456-7890。

实现这一目标的最简单，最快捷的方法是什么？

由于

Answer 1

最快的方法是使用一些正则表达式：

n是数字

n.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");

示例：http://jsfiddle.net/jasongennaro/yXD7g/

var n = "1234567899";
console.log(n.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3"));

Answer 2

您可以使用substr-function来实现这一点，假设连字符总是插在同一位置：

var hypString = phonestr.substr(0,3) + '-' + phonestr.substr(3, 6) + '-' + phonestr.substr(6);

Answer 3

鉴于这种输入，另一种方式是：

var phone = "1234567890";
phone = phone.replace(/(\d{3})(\d{3})(\d+)/, '$1-$2-$3');

当然，如果您的输入发生变化，这将不起作用。

Answer 4

您可以创建一个javascript函数来格式化电话号码。像这样：

    function formatPhoneStr(o)
    {
        var strPhone = o.value;

        if( (strPhone != null) && (strPhone.length > 0) && (strPhone.indexOf('(') == -1))
        {
            if (strPhone.length == 10)
            {
                strPhone = '(' + strPhone.substr(0,3) + ') ' + strPhone.substr(3,3) + '-' + strPhone.substr(6,4);
            }
            else if (strPhone.length > 10)
            {
                strPhone = '(' + strPhone.substr(0,3) + ') ' + strPhone.substr(3,3) + '-' + strPhone.substr(6,4) + ' x' + strPhone.substr(10);
            }
            o.value = strPhone;
        }
    }

Answer 5

试试这个......

<input required type="tel" maxlength="12" onKeypress="addDashesPhone(this)" name="Phone" id="Phone">    

function addDashesPhone(f) {
  var r = /(\D+)/g,
  npa = '',
  nxx = '',
  last4 = '';
  f.value = f.value.replace(r, '');
  npa = f.value.substr(0, 3);
  nxx = f.value.substr(3, 3);
  last4 = f.value.substr(6, 4);
  f.value = npa + '-' + nxx + '-' + last4;
}

Answer 6

我认为另一种替代方案是最干净的方法：slice字符串方法。

formattedPhone = phone.slice(0,3) + '-' + phone.slice(3, 6) + '-' phone.slice(6)

第一个参数是字符串中的起始位置，第二个参数是结束位置。正如您在上面看到的那样，直到字符串结尾才会有参数。一个很好的功能是，像Python一样，负位置从字符串的末尾开始计算。这可以使您的代码更加健壮：

formattedPhone = phone.slice(0,3) + '-' + phone.slice(3, -4) + '-' + phone.slice(-4)

即使你有一个9或11位数的手机，它看起来也不错。

Answer 7

对于反应只需使用像这个例子的引用：

这里我只是替换元素的值并在onBlur中包含连字符

逻辑部分：

    const ref = React.useRef(null)

    const blurHandle = () => {
        ref.current.value = ref.current.value.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3")
    };

声明性渲染部分：

<Input
  ref={phoneInput}
  onFocus={focusHandler}
  onBlur={blurHandle}
  type="tel"
  placeholder="###-###-####"
  name="from_phoneNumber"
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
/>

如果您的 Input 是使用内部输入 JSX 元素的分离样式组件，请记住使用前向引用将引用传递给子元素

const Input = React.forwardRef((props, ref) => (
    <input type="tel" ref={ref} ........ />
))

Answer 8

如果你正在使用ASP.NET客户端库，他们有一个很棒的String.format方法，它提供了语言环境格式和各种花哨的东西。如果您熟悉.NET，则会调用该方法：

<script type="text/javascript">
    var myPhone = String.format("{0}-{1}-{2}", firstThree, secondThree, lastFour);
</script>

如果你没有使用ASP.NET库，我相信你可以在你自己的实现中完成基本的格式化 - 显然这将是没有本地化的，你应该在混合中抛出一些错误处理/检查： / p>

function format(str, arr){
     for(var i = 0; i < arr.length; i++) {
         var r = new RegExp("\\{" + i + "\\}", "g");
         str = str.replace(r,arr[i]);
    }
    return str;
}
alert(format("{0}-{1}-{2}", [123,456,7890]));

Answer 9

这是我的解决方案，以防它帮助某人：

validatePhone：function（e）{

    var number = this.$el.find('#phoneNumberField').val().replace(/-/g, '');

    if(number.length > 10) {
        e.preventDefault();
    }

    if(number.length < 3) {
        number = number; // just for legibility
    } else if(number.length < 7) {
        number = number.substring(0,3) + 
        '-' + 
        number.substring(3,6)
    } else if(number.length > 6) {
        number = number.substring(0,3) + 
        '-' + 
        number.substring(3,6) + 
        '-' + 
        number.substring(6,10);
    }

    this.$el.find('#phoneNumberField').val(number);

}

在javascript中插入连字符

9 个答案: