<body>
<input type="text">
<button>添加千分符</button>
<p></p>
</body>
method one:
<script>
var input = document.querySelector("input");
var p = document.querySelector("p");
var btn = document.querySelector("button");
btn.onclick = function() {
var str = input.value.split("");
//将多余的位数分离出来
var more = str.slice(0, (str.length % 3));
str = str.slice((str.length % 3));
str = str.join('').match(/[0-9]{3}/g).join(",");
p.innerHTML = [...more, ",", ...str].join("");
}
</script>
Method two (more efficient):
<script>
var input = document.querySelector("input");
var p = document.querySelector("p");
var btn = document.querySelector("button");
btn.onclick = function() {
str = input.value;
var re = /(\d+)(\d{3})/;
while (re.test(str)) {
str = str.replace(re, function($0, $1, $2) {
return $1 + ',' + $2;
})
}
p.innerHTML = str;
}
</script>
Method three:
<script>
var input = document.querySelector("input");
var p = document.querySelector("p");
var btn = document.querySelector("button");
btn.onclick = function() {
var str = input.value.split("").reverse().join("");
var strL = str.length;
str = str.replace(/\d{3}/g, function($0) {
return $0 + ",";
})
str = str.split("").reverse().join("");
if (strL % 3 == 0) {
str = str.substring(1); //如果刚好前面会多一个,
}
p.innerHTML = str;
}
</script>