目标
使用正则分析各种日期格式
正则
new RegExp("^(\\d{2,4})[年\\-/]?(\\d{1,2})[月\\-/]?(\\d{1,2})[日]?$");
示例
示例截图
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.row {
display: flex;
align-items: center;
}
.row>input {
flex: 1;
}
.result {
width: max-content;
display: flex;
gap: 12px;
background-color: aqua;
}
.result>* {
background-color: #fff;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>
const { ref, watch } = Vue;
const { useEventListener } = VueUse;
useEventListener(window, "load", function () {
const app = Vue.createApp({
setup(props) {
const date = ref("2020-01-01");
const rgx = ref("^(\\d{2,4})[年\\-/]?(\\d{1,2})[月\\-/]?(\\d{1,2})[日]?$");
const res = ref("yyyy-mm-dd");
const data = [
"yy-m-d",
"yy-mm-dd",
"yyyy-m-d",
"yyyy-mm-dd",
"yyyymmdd",
"yy年m月d日",
"yy年mm月dd日",
"yyyy年m月d日",
"yyyy年mm月dd日",
"yy/m/d",
"yy/mm/dd",
"yyyy/m/d",
"yyyy/mm/dd",
];
function analysis(d) {
return d.match(rgx.value);
}
function format(d) {
return d.replace(new RegExp(rgx.value), res.value)
}
function customFormat(d, target) {
const rule = [/y+/, /m+/, /d+/];
const dt = new Date();
return d.replace(new RegExp(rgx.value), function (...args) {
const $y = target.match(rule[0])[0];
if (args[1].length < $y.length) {
args[1] = `${String(dt.getFullYear()).slice(0, args[1].length)}${args[1]}`;
}
let temp = target.replace($y, args[1].slice(-$y.length))
return rule.slice(-2).reduce((r, v, i) => {
const $ = r.match(v)[0];
const $v = args[i + 2];
return r.replace(v, $.length === 1 ? parseInt($v) : `0${$v}`.slice(-2));
}, temp);
});
}
return { date, rgx, res, data, analysis, format, customFormat };
},
});
app.mount("#app");
});
</script>
</head>
<body>
<div id="app">
<p>支持以下格式的互相转换:</p>
<p class="row"><label>日期:</label><input v-model="date" /></pc>
<p class="result" v-for="item in data">
<span>目标格式:{{item}}</span><span>目标结果:{{customFormat(date, item)}}</span>
</p>
</div>
</body>
</html>