综合案例,时钟

该文讲述了如何利用Node.js的fs和path模块,配合正则表达式,从HTML文件中提取出CSS和JavaScript代码,然后将它们分别保存为单独的文件,并更新HTML文件引用这些新文件。
摘要由CSDN通过智能技术生成

将一份代码中的html,js,css分别摘出

需用到fs模块,path模块,正则表达式等

exec方法:

测试字符串中的匹配项。

该方法是通用的匹配模式。

如果找到匹配项,则返回结果数组,否则返回 null

通常用于正则表达式

replace方法:

替换值,只会替换第一个实例。

如需替换所有实例,请使用带有  g  修饰符集的正则表达式

注意:在替换带有 符号的字符串时,在 / 前加上 \ 转义符进行转义        如下:

例子:

总结:

const fs = require('fs')
const path = require('path')

//定义正则表达式,分别匹配<style>标签和<script>标签
/**
 * \:为转义符
 * \s:为空白字符
 * \S:为非空白字符
 * *:为匹配任意次数
 */
const regSytle = /<style>[\s\S]*<\/style>/;
const regScript = /<script>[\s\S]*<\/script>/;

//获取时钟.html的内容
fs.readFile(path.join(__dirname, '../时钟案例/html/时钟.html'), 'utf-8', function (err, res) {
    if (err) {
        return console.log('读取失败' + err.message);
    }
    //exec方法:属于正则表达式方法,返回值为数组,索引为0的返回值为正则表达式所获取的值
    //replace方法:替换字符串
    //css[0]为正则表达式所获取的内容
    const css = regSytle.exec(res)
    const newCss = css[0].replace('<style>', '').replace('</style>', '')
    
    //script[0]为正则表达式所获取的内容
    //replace方法:替换字符串
    const script = regScript.exec(res)
    const newScript = script[0].replace(/<script>/g, '').replace(/<\/script>/g, '')

    //调用fs.writeFile方法,写入内容
    fs.writeFile(path.join(__dirname, './css/01.css'), newCss, function (err) {
        if (err) {
            return console.log('写入css失败' + err.message);
        }
        console.log('写入css成功');
    })
    fs.writeFile(path.join(__dirname, './js/01.js'), newScript, function (err) {
        if (err) {
            return console.log('写入js失败' + err.message);
        }
        console.log('写入js成功');
    })
    const html = res.replace(css[0], '<link rel="stylesheet" href="../css/01.css"></link>').replace(script[0], '<script src="../js/01.js"></script>');
    fs.writeFile(path.join(__dirname, './html/01.html'), html, function (err) {
        if (err) {
            return console.log('写入html失败' + err.message);
        }
        console.log('写入html成功');
    })
})

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值