将clockTest.html下的style，script文件分解出来，并且可以正常运行
#####1.导入模块
#####2.读取文件
#####3.匹配正则
#####4.获取内容，替换内容
#####5.写入文件
clockTest.html文件内容
<!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>简单时钟</title>
</head>
<body>
<div class="clockBox">
<div class="time" id="time">00 : 00 : 00</div>
</div>
</body>
</html>
<script>
setInterval(getTime, 1000)
function getTime() {
var date = new Date()
var time = date.toLocaleTimeString()
var parentTime = time.replace(/:/g, ' : ')
document.getElementById('time').innerHTML = parentTime
}
</script>
<style>
body {
display: flex;
justify-content: center;
background: linear-gradient(
90deg,
rgb(253, 183, 183),
rgb(141, 228, 255)
);
}
.clockBox {
margin: 15vh;
margin: 15vh;
width: 50vw;
height: 50vh;
border: 3px solid white;
border-radius: 15px;
box-shadow: 3px 5px 5px 10px rgb(0, 0, 0);
display: flex;
justify-content: center;
-webkit-box-reflect: below 0px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(
250,
250,
250,
0
)
30%, rgba(250, 250, 250, 0.3));
}
.time {
user-select: none;
font-size: 130px;
color: aliceblue;
text-shadow: 7px 3px 5px black;
line-height: 45vh;
}
</style>
实现文件内容
/*
将clockTest.html下的<style><script>文件分解出来，并且可以正常运行
1.导入模块
2.匹配正则
3.读取文件
*/
//1
const fs = require('fs')
const path = require('path')
//2
// \s空白字符 \S非空白字符 *任意次
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/
//3
fs.readFile(
path.join(__dirname, '../testFile/clock/clockTest.html'),
'utf8',
(err, data) => {
if (!err) {
//调用方法进行匹配，拿到对应字符串
resolveCss(data)
resolveJS(data)
resolveHtml(data)
}
}
)
// exec 方法 用于检索字符串正则表达式的匹配
//获取js文件
function resolveJS(data) {
//通过exec[0]拿到对应字符串之后全局匹配去掉标签
const js = regScript.exec(data)[0].replace(/<script>|<\/script>/g, '')
//写入
fs.writeFile(
path.join(__dirname, '../testFile/clock/clock.js'),
js,
'utf8',
(err, data) => {
if (err) {
return console.log('js写入失败')
}
console.log('js写入成功')
}
)
}
//获取css文件
function resolveCss(data) {
//拿到内容替换掉style标签
const css = regStyle.exec(data)[0].replace(/<style>|<\/style>/g, '')
//写入
fs.writeFile(
path.join(__dirname, '../testFile/clock/clock.css'),
css,
'utf8',
(err, data) => {
if (err) {
return console.log('css写入失败')
}
console.log('css写入成功')
}
)
}
//获取html文件
function resolveHtml(data) {
var html = data
/*
注意是html.replace,不是data.replace
将css和js内容替换成''
*/
html = html.replace(regStyle.exec(data)[0], '')
html = html.replace(regScript.exec(data)[0], '')
//写入
fs.writeFile(
path.join(__dirname, '../testFile/clock/clock.html'),
html,
'utf8',
(err, data) => {
if (err) {
return console.log('html写入失败')
}
console.log('html写入成功')
}
)
}
文件层级
image.png
执行完成后css
body {
display: flex;
justify-content: center;
background: linear-gradient(
90deg,
rgb(253, 183, 183),
rgb(141, 228, 255)
);
}
.clockBox {
margin: 15vh;
margin: 15vh;
width: 50vw;
height: 50vh;
border: 3px solid white;
border-radius: 15px;
box-shadow: 3px 5px 5px 10px rgb(0, 0, 0);
display: flex;
justify-content: center;
-webkit-box-reflect: below 0px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(
250,
250,
250,
0
)
30%, rgba(250, 250, 250, 0.3));
}
.time {
user-select: none;
font-size: 130px;
color: aliceblue;
text-shadow: 7px 3px 5px black;
line-height: 45vh;
}
执行完成后js
setInterval(getTime, 1000)
function getTime() {
var date = new Date()
var time = date.toLocaleTimeString()
var parentTime = time.replace(/:/g, ' : ')
document.getElementById('time').innerHTML = parentTime
}
执行完成后html
<!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>简单时钟</title>
</head>
<body>
<div class="clockBox">
<div class="time" id="time">00 : 00 : 00</div>
</div>
</body>
</html>
