node.js提取html中的内部引入css和js代码，并修改为外部引入

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

node.js提取html中的内部引入css和js代码，并修改为外部引入

猜你喜欢