nodejs--基于 fs 和 path 模块的时钟案例

目的:

将index.html页面里的 css html js代码拆分成三个文件,分别是:

  • index.css
  • index.html
  • index.js
  • 并且将拆分出来的3个文件,存放到clock目录中

实现的步骤:

  1. 创建两个正则表达式,分别用来匹配<style>和<script>标签
  2. 使用fs模块,读取需要被处理的htmml文件
  3. 自定义resolveCSS方法,来写入 index.css 样式文件
  4. 自定义 resolveJS方法,来写入 index.js 脚本文件
  5. 自定义 resolveHTML方法,来写入 index.html文件

// 1.导入所需模块
const fs = require("fs");
const path = require("path");

//2.创建对应的正则表达式分别处理 <style></style> 和 <script></script> 标签
// \s 匹配空白字符
// \S 匹配任意非空白字符
// * 出现任意多次
const regStyle = /<style>[\s\S]*<\/style>/;
const regScript = /<script>[\s\S]*<\/script>/;

// 3 读取文件
fs.readFile(path.join(__dirname,'./index.html'),'utf8',function(err,dataStr){
    if(err){
        return console.log('读取失败',err.message);
    }

    // 3.1 
    resolveCSS(dataStr);
    resolveJS(dataStr);
    resolveHTML(dataStr);
})


//4.自定义 resolveCSS() 处理css
function resolveCSS(htmlStr){
    //4.1 使用正则提取页面中的 <style></style> 标签
    const r1 = regStyle.exec(htmlStr);

    //4.2 将提取出来的样式字符串做进一步处理
    const newCSS = r1[0].replace('<style>','').replace('</style>','');

    //4.3 将提取出来的 css 样式,写入 index.css 文件中
    fs.writeFile(path.join(__dirname,'./clock/index.css'),newCSS,err => {
        if(err){
            return console.log('写入失败',err.message);
        }
        console.log('写入成功');
    })
}

//5.自定义 resolveJS() 处理 js
function resolveJS(htmlStr){
    //5.1 使用正则提取页面中的 <script></script> 标签
    const r2 = regScript.exec(htmlStr);

    //5.2 将提取出来的样式字符串做进一步处理
    const newJS = r2[0].replace('<script>','').replace('</script>','');

    //5.3 将提取出来的 js 样式,写入 index.js 文件中
    fs.writeFile(path.join(__dirname,'./clock/index.js'),newJS,err => {
        if(err){
            return console.log('写入失败',err.message);
        }
        console.log('写入成功');
    })
}

//6.自定义  resolveHTML() 处理 html
function  resolveHTML(htmlStr){
    //6.1 使用字符串的 replace() 把内嵌的 <style></style> 和 <script></script> 标签,替换为外联的 <link href=""> 和 <script src=""></script>
    const newHTML = htmlStr
    .replace(regStyle,`<link rel="stylesheet" href="./index.css">`)
    .replace(regScript,`<script src="./index.js"></script>`);

    //6.2 将替换完成之后的 html 代码,写入到 index.html 文件中
    fs.writeFile(path.join(__dirname,'./clock/index.html'),newHTML,err => {
        if(err){
            return console.log('写入失败',err.message);
        }
        console.log('写入成功');
    })
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白小白从不日白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值