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

靖海雷军

已于 2022-04-27 14:50:22 修改

阅读量250

点赞数

分类专栏： node.js 文章标签： node.js

于 2022-04-27 14:45:47 首次发布

本文链接：https://blog.csdn.net/weixin_45032905/article/details/124450815

版权

node.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该博客介绍了一个JavaScript脚本，用于从HTML文件中抽离<style>和<script>标签内容，分别保存为.css和.js文件，并用外部链接替换原有的内联样式和脚本。内容涉及正则表达式、Node.js的fs模块以及文件操作，实现了静态资源的组织优化。

摘要由CSDN通过智能技术生成

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>