利用正則新增千分符(JavaScript)
阿新 • • 發佈:2021-02-10
技術標籤:前端# JavaScript小練習
<body>
<input type="text">
<button>新增千分符</button>
<p></p>
</body>
方法一:
<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>
方法二(比較高效):
<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>
方法三:
<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>