前提:配置好node环境,能够使用终端(cmd或Windows PowerShell)node命令运行js文件
nodejs安装教程
某位大佬整理的nodejs入门教程
node xxx.js //利用node环境运行js文件
原版html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nodejsStudy</title>
<style>
.test{
list-style: none;
line-height: normal;
}
h1 {
color: orange;
}
</style>
<script src="./javascripts/require.min.js"></script>
</head>
<body>
<h1>nodejsDemo
</h1>
<script>
var x=document.querySelector('h1');
</script>
</body>
</html>
负责处理的js文件:
const fs=require('fs');
//读取文件方法,其中的两个参数顺序不可变,名称可变
const path=require('path');
//\s代表空格字符,\S代表非空格字符,\需要/转义
//匹配style标签
const regStyle=/<style>[\s\S]*<\/style>/
//匹配script标签
const regScript=/<script>[\s\S]*<\/script>/
//读取指定的,包含了css和js的html文件
fs.readFile(path.join(__dirname,'./index.html'),'utf-8',function(err,dataStr){
if(err) return console.log('read file error!');
console.log('read file success!');
// console.log(dataStr);
resolveCSS(dataStr);
resolveJS(dataStr);
resolveHTML(dataStr);
})
//用于提取html中的css代码并保存到外联css文件
function resolveCSS(dataStr){
const r1=regStyle.exec(dataStr);
try {
const newCSS=r1[0].replace('<style>','').replace('</style>','');
fs.writeFile(path.join(__dirname,'./style.css'),newCSS,function(err){
if(err) return console.log('css write error!');
console.log('css write success!');
})
} catch (error) {
//style之前已经处理好了,报错提示
console.log('can not find <style></style>');
}
// console.log(newCSS);
}
//用于提取html中的js代码并保存到外联js文件
function resolveJS(dataStr){
//通过正则表达式筛选出html中的script脚本
const r1=regScript.exec(dataStr);
try {
const newJS=r1[0].replace('<script>','').replace('</script>','');
// console.log('newJS:',newJS);
fs.writeFile(path.join(__dirname,'./Test.js'),newJS,function(err){
if(err) return console.log('js write error!');
console.log('js write success!');
})
} catch (error) {
//script之前已经处理好了,报错提示
console.log('can not find <script></script>');
}
}
//去除原本html中的css和js代码,同时设置外联css文件和外联js文件链接
function resolveHTML(dataStr){
const newHtml=dataStr.replace(regStyle,'<link rel="stylesheet" href="style.css">')
.replace(regScript,'<script src="./Test.js"></script>');
console.log(newHtml);
fs.writeFile(path.join(__dirname,'./index.html'),newHtml,function(err){
if(err) console.log('html write error!');
console.log('html write success!');
})
}
使用终端运行js脚本:
处理前项目结构:
处理后原html文件同级目录下的结构:
control.js为用于处理html文件的脚本文件,需要用node环境运行;
index.html为被处理的网页文件,处理前包含了内部css和js代码;
style.css为处理后的css文件,用于存储html之前的css代码;
Test.js为处理今后的js文件,用于存储html之前的js代码