【Node.JS 练习】时钟案例
案例要求 将素材目录下的 index.html 页面，拆分成三个文件，分别是：index.css，index.js，index.html
并且将拆分出的三个文件存放到 clock 目录中。
<style>body {
</head>
<body>
</body><div class="container"><div><span>11:11:00</span><h2>index</h2></div></div>
<script>
</script>
实现步骤创建两个正则表达式，分别用来匹配<style>和<script>标签。使用 fs 模块，读取需要被处理的 html 文件。自定义 resolveCSS 方法，来写入 index.css 样式文件自定义 resolveJS 方法，来写入 index.js 脚本文件自定义 resolveHTML 方法，来写入 index.html 文件创建 正则表达式 const fs = require('fs');const path = require('path');//定义正则表达式 const restyle = /<style>[\s\S]</style>/const rescript = /<script>[\s\S]</script>/
引入 fs 模块和路径模块。
用正则表达式来匹配 style 标签，包含内部所有的空白和非空白字符，数量是任意个。
使用相关模块，读取需要被处理的 html 文件 fs.readFile(path.join(__dirname, '/index.Html'), 'utf-8', function (err, data) {if (err) {console.log('读取文件失败' + err);} else {console.log('读取文件成功');}
})
自定义 resolve 方法 cssfunction resolveCss(cssStr) {//正则匹配 cssconst r1 = restyle.exec(cssStr);//替换掉非必要标签 const newCss = r1[0].replace('<style>', '').replace('</style>', '');//将提取内容写入到 clock 目录中一个 index.css 中 fs.writeFile(path.join(__dirname, '/clock/index.css'), newCss, function (err) {if (err) {return console.log('导入 css 样式失败' + err);} else {console.log('写入样式成功');}
}
生成了一个 css 文件
jsfunction resolveJS(jsStr) {//正则匹配 jsconst r1 = rescript.exec(jsStr);//替换掉非必要标签 const newJs = r1[0].replace('<script>', '').replace('</script>', '');//将提取内容写入到 clock 目录中一个 index.js 中 fs.writeFile(path.join(__dirname, '/clock/index.js'), newJs, function (err) {if (err) {return console.log('导入 js 样式失败' + err);} else {console.log('写入样式成功');}})
}
htmlfunction resolveHtml(htmlStr) {const newHtml = htmlStr.replace(restyle, '<link rel="stylesheet" href="./index.css"/>').replace(rescript, '<script src = "./index.js"></script>')fs.writeFile(path.join(__dirname, '/clock/index.html'), newHtml, function (err) {if (err) {console.log('导入 html 文件失败' + err);} else {console.log('导入成功');}})}
还未添加个人签名 2022-10-14 加入
还未添加个人简介
评论