时钟案例-基于node.js的文件模块和path模块

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

//配置正则表达式
//匹配<style></style>标签和<script></script>标签
const resStyle = /<style>[\s\S]*<\/style>/  
const resScript = /<script>[\s\S]*<\/script>/  
//\s表示空字符
//\S表示任意非空字符
//*表示任意多次

//读取文件并做抽离css, script的处理
fs.readFile(path.join(__dirname, './demo/index.html'), 'utf8', function(err, dataStr){
	if (err)
	{
		return console.log('File readed fail'+ err.message)
	}
	console.log('File readed success')
	//抽取css, 并放进./clock/index.css文件
	resolveCSS(dataStr)
	resolveScript(dataStr)
	resolveHtml(dataStr)
})

//定义处理css样式的方法
function resolveCSS(htmlStr) {
	//使用正则提取需要的内容
	//正则表达式有一个方法, exec按照正则表达式来提取字符串
	const r1 = resStyle.exec(htmlStr)
	console.log(r1)
	//将提取出来的字符串做replace替换操作
	const newCss = r1[0].replace('<style>', '').replace('</style>','')
	//最后写到指定的文件
	fs.writeFile(path.join(__dirname, './clock/index.css'), newCss, function(err){
		if (err)
		{
			return console.log('css file writeed fail' + err.message)
		}
		console.log('css file writed success')
	})
}

//定义处理script的方法
function resolveScript(htmlStr) {
	//使用正则表达式提取需要的内容
	const r2 = resScript.exec(htmlStr)
	console.log(r2)
	//将提取出来的字符串做replace处理
	const newScript = r2[0].replace('<script>', '').replace('</script>', '')
	//最后写到指定的文件
	fs.writeFile(path.join(__dirname, './clock/index.js'), newScript, function(err){
		if (err)
		{
			return console.log('js file writed fail'+ err.message)
		}
		console.log('js file writed success')
	})
}

//定义处理html文件的方法
function resolveHtml(htmlStr){
	//将原来的html文件转换为新的文件, style和script使用外联方式
	const newHtml = htmlStr.replace(resStyle, '<link rel="stylesheet" href="./index.css" />').replace(resScript, '<script src="./index.js"></script>')
	//写入到指定的文件
	fs.writeFile(path.join(__dirname, './clock/index.html'), newHtml, function(err){
		if (err)
		{
			return console.log('html file writed fail')
		}
		console.log('html writed success')
	})
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

PS C:\Users\lyd\Documents\lea\clockdemo> node .\时钟案例.js
File readed success
[ '<style>\r\n\tthis is css code!!!!!!!!!\r\n</style>',
  index: 0,
  input: '<style>\r\n\tthis is css code!!!!!!!!!\r\n</style>\r\n\r\n<html>\r\n<body>\r\n</body>\r\n<script>\r\n\tthis is js code!!!!!!!!!!!!!!!\r\n</script>\r\n</html>\r\n\r\n',
  groups: undefined ]
[ '<script>\r\n\tthis is js code!!!!!!!!!!!!!!!\r\n</script>',
  index: 74,
  input: '<style>\r\n\tthis is css code!!!!!!!!!\r\n</style>\r\n\r\n<html>\r\n<body>\r\n</body>\r\n<script>\r\n\tthis is js code!!!!!!!!!!!!!!!\r\n</script>\r\n</html>\r\n\r\n',
  groups: undefined ]
css file writed success
js file writed success
html writed success
PS C:\Users\lyd\Documents\lea\clockdemo>



注意点:
fs写文件时, 可以创建一个文件但是不能创建一个目录
所以, fs.writeFile时一定要保证路径的真是有效性

还有就是新的内容会覆盖原来的内容

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值