Question

在正则表达式中完全没有菜...

我想使用类似以下格式的数字：1234123412341234

12 3412 3412 3412 34

当前我有以下代码：

<label for="num1">Formmatted Number</label>
<input id="num1" type="text" name="num1" />

function space(str, after) {
    if (!str) {
        return false;
    }
    after = after || 4;
    var v = str.replace(/[^\dA-Z]/g, ''),
        reg = new RegExp(".{" + after + "}", "g");
    return v.replace(reg, function (a) {
        return a + ' ';
    });
}

var el = document.getElementById('num1');
el.addEventListener('keyup', function () {
    this.value = space(this.value, 4);
});

这会将数字设置为：

1234 1234 1234 1234

您能帮我吗？

Answer 1

这是不使用正则表达式的解决方案...

const fmtNum = (num) => [2, 7, 12, 17].reduce((acc, curr) => [acc.slice(0, curr), " ", acc.slice(curr)].join(""), String(num));

请注意，要完成此操作，我们必须将类型从数字更改为字符串。

这可以扩展为传入不同中断索引的参数，您可以在其中指定所需的空格，例如：

const fmtNum = (num, spacePoints) => spacePoints.reduce((acc, curr) => [acc.slice(0, curr), " ", acc.slice(curr)].join(""), String(num));

调用此方法看起来像： fmtNum(1234123412341234, [2, 7, 12, 17])

Answer 2

您可以替换为2个起始数字，然后为所有四个数字添加一个空格。

var number = 1234123412341234,
    string = number.toString().replace(/^..|..../g, '$& ');
    
console.log(string);

或者您可以使用正向超前的正则表达式，以特殊的长度到字符串末尾。

var number = 1234123412341234,
    string = number.toString().replace(/(?=(.{14}|.{10}|.{6}|.{2})$)/g, ' ');
    
console.log(string);

Answer 3

这是一种逐步格式化输入的巧妙方法。从字符串中间插入或删除字符时，这甚至可以将当前光标位置保持在正确的位置：

function count (str, re) {
  return str.split(re).length - 1
}

document.querySelector('input').addEventListener('input', function () {
  const { value, selectionStart } = this
  const oldIndex = selectionStart - count(value.slice(0, selectionStart), /\D/g)
  const numeric = value.replace(/\D/g, '')
  const sanitized = numeric
    .replace(/(\d{0,2})(\d{0,4})(\d{0,4})(\d{0,4})(\d{0,2}).*/, '$1 $2 $3 $4 $5')
    .trim()
  const newIndex = oldIndex + Math.floor((oldIndex + 2) / 4)

  this.value = sanitized
  this.setSelectionRange(newIndex, newIndex)
})

<input type="text">

Answer 4

只需解决问题：）...无论如何，谢谢您的帮助。正如前面的主题所讨论的，长度的16位并不重要，因为该字段仅允许插入16个字符...否则该约束可以包含在脚本中。

function format(str, after) {
    var v = str.replace(/[^\dA-Z]/g, ''),
        reg = new RegExp(".{" + after + "}", "g");
    return v.replace(reg, function (a) {
        if (a.length > 2) {
            a = a.substring(0,2) + ' ' + a.substring(2,a.length);
        }
        return a;
    });
}

var el = document.getElementById('num1');
el.addEventListener('keyup', function () {
    this.value = format(this.value, 4);
});

<label for="num1">Formatted Number</label>
<input id="num1" type="text" name="num1" />

Answer 5

尝试以下模式：\b(\d{2})(\d{4})(\d{4})(\d{4})(\d{2})\b，它将允许您将更具体的数字批次放入单独的组中，然后仅用\1 \2 \3 \4 \5进行替换，即可获得所需的格式。

Demo

Answer 6

var el = document.getElementById('num1'); 
el.addEventListener('keyup', function () { this.value = format(this.value); }); 

function format(s){ 
    return  Array.prototype.map.call(s,(e,i)=>(e=e.replace(/\s/g,""), 
        (i+3)%5==0 ? " "+e:e)).join("");
}

如果始终为16个字符，则可以将map fn与条件一起使用，条件是index等于2或index是第4个字符。

JavaScript格式编号

6 个答案: