前端根据文件名排序(按照数字、特殊字符、英文、中文)

文件名根据首字母排序,按照数字 - 特殊字符 - 大写英文 - 小写英文 - 中文的顺序排序

先把数据中的中文英文分别放到不同的数组中

  • 中文数组通过localeComparet对比字符串来进行排序
  • 其他数组根据字符编码排序

参考:https://www.cnblogs.com/xiejn/p/16378951.html

  data() {
    return {
      arr: ["测试第一单元第五章", "阿里","测试第一单元第一章","####","4第二","aaa三", "第3"],
    };
  },
  mounted() {
    this.pySort(this.arr);
  },
methods: {
    pySort(arr, empty) {
      var $this = this;
      if (!String.prototype.localeCompare) return null;
      var result = [];
      let enList = [];// 英文数组
      let cnList = [];//中文数组
      let elList = [];//数字
      let numList = [];//其他字符
      this.arr.forEach((item) => {
        let first = item.slice(0, 1);
        if ($this.isChar(first)) {
          enList.push(item);
        } else if ($this.isChinese(first)) {
          cnList.push(item);
        } else if ($this.isNumber(first)) {
          numList.push(item);
        } else {
          elList.push(item);
        }
      });
      enList.sort((a, b) => {
        return b.charCodeAt(0) - a.charCodeAt(0);
      });
      cnList.sort((a, b) => {
        return a.slice(0, 1).localeCompare(b.slice(0, 1), "zh-Hans-CN", {
          sensitivity: "accent",
        });
      });
      numList.sort((a, b) => {
        return a.charCodeAt(0) - b.charCodeAt(0);
      });
      elList.sort((a, b) => {
        return a.charCodeAt(0) - b.charCodeAt(0);
      });
      result = [...numList, ...elList, ...enList, ...cnList];
      return result;
    },
    isChinese(temp) {
      var re = /[^\u4E00-\u9FA5]/;
      if (re.test(temp)) {
        return false;
      }
      return true;
    },
    isChar(char) {
      var reg = /[A-Za-z]/;
      if (!reg.test(char)) {
        return false;
      }
      return true;
    },
    isNumber(num) {
      var re = /^([0-9]+\.?[0-9]*|-[0-9]+\.?[0-9]*)$/;
      if (!re.test(num)) {
        return false;
      } else {
        return true;
      }
    },
  },

排序后

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值