前提：配置好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代码