如何使用每4个字符后的空格在我的UI中呈现数字?

问题描述 投票:2回答:3

我有一个16位数的属性,例如回来(1234123412341234)。我希望它在我的UI上呈现每4个数字字符的空格(例如1234 1234 1234 1234)。我正在使用Angular JS,所以我正在寻找一种方法来实现这一目标。我很确定它是自定义Angular过滤器还是与regex相关,但我对其中任何一个以及如何实现它的知识都是有限的。

javascript angularjs regex angular-filters
3个回答
0
投票

AngularJS过滤器易于设置。只需接受一个参数并在其上应用任何JS格式。这是一个工作示例:

var app = angular.module('myApp', []);
app.filter('myFilter', function() {
  return function(x) {
    return x.toString().replace(/\d{4}(?=.)/g, '$& '); // your format filter here
  };
});
app.controller('demoCtrl', function($scope) {
  $scope.test = 1234123412341234;
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="demoCtrl">
    {{test | myFilter}}
  </div>
</body>
</html>

(我从Nina Scholz的答案中获取了正则表达式代码。随意使用任何其他正则表达式)


3
投票

您可以使用前瞻性的正则表达式。

Positive Lookahead在等号后查找模式,但不在比赛中包含它。

X(ω= Y)

仅当'x'后跟'y'时才匹配'x'。这称为前瞻。

例如,/Jack(?=Sprat)/只有匹配'杰克'才会跟随'斯普拉特'。 /Jack(?=Sprat|Frost)/只有跟随'Sprat'或'Frost'才能匹配'Jack'。但是,'Sprat'和'Frost'都不是比赛结果的一部分。

function format(s) {
    return s.toString().replace(/\d{4}(?=.)/g, '$& ');
}

console.log(format(1234123412341234));

2
投票

您可以使用match()然后使用join()和空格。

var str = '1234123412341234';
var res = str.match(/.{1,4}/g).join(' ');
console.log(res);
© www.soinside.com 2019 - 2024. All rights reserved.