利用正则添加千分符（JavaScript）

最新推荐文章于 2022-10-10 16:53:34 发布

~嘘~禁止想象~

最新推荐文章于 2022-10-10 16:53:34 发布

阅读量312

点赞数 2

分类专栏：前端 # JavaScript小练习

本文链接：https://blog.csdn.net/weixin_45773503/article/details/113676981

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript小练习

36 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<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>

~嘘~禁止想象~

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
利用正则添加千分符（JavaScript）

<body> <input type="text"> <button>添加千分符</button> <p></p></body>方法一： <script> var input = document.querySelector("input"); var p = document.querySelector("p"); var btn = document.query.
复制链接

扫一扫

专栏目录