node.js 将HTML分割为单独的html 、css、js文件。

目的：将一个HTML文件分割为单独的html、css、js文件。

分步代码

①创建两个正则表达式，分别用来匹配

• 代码

  // 1.1 导入fs模块
  const fs=require('fs');
  
  // 1.2 导入path模块
  const path=require('path');
  
  // 1.3定义正则表达式分别匹配<style></style>和<script></script>标签
  //  其中/s表示匹配空字符， /S表示匹配非空字符，*表示匹配任意次
  const regStyle=/<style>[\s\S]*<\/style>/;
  const regScript=/<script>[\s\S]*<\/script>/;
  

②使用fs模块，读取需要被处理的HTML文件

• 代码

  // 2.1读取需要处理的html文件
  fs.readFile(path.join(__dirname,'./files/index.html'),'utf-8',(err,data)=>{
      // 2.2读取HTML文件失败
      if(err){
          return console.log('读取失败'+err.message);
      }
      // 2.3 读取HTML文件成功后，调用对应的3个方法，分别拆解出css、js、html文件
      resolveCSS(data);
  	resolveJS(data);
  	resolveHTML(data);
  })
  

③自定义 resolves方法，来写入 index. css 样式文件

• 代码

  // 3.1 定义处理css样式的方法
  function resolveCSS(htmlStr){
  
      // 3.2 使用正则提取需要的内容
      const r1=regStyle.exec(htmlStr);
      // 3.3 进行字符串的替换操作
      const newCSS=r1[0].replace('<style>','').replace('</style>','');
  
      // 3.4 调用fs.writeFile()写入css样式，写入到clock文件夹下的index.css文件中
      fs.writeFile(path.join(__dirname,'./files/clock/index.css'),newCSS,'utf-8',function(err){
          if(err){
              return console.log('写入CSS样式失败'+err.message);
          }
          console.log('写入样式文件成功');
      })
  }
  

④自定义 resolves方法，来写入 index.js脚本文件

• 代码

  // 4.1定义处理JS的方法
  function resolveJS(htmlStr){
      // 4.2 通过正则提取对应的script标签中的内容
      const r2=regScript.exec(htmlStr);
      // 4.3 替换<script>和</script>标签为空
      const newJs=r2[0].replace('<script>','').replace('</script>','');
      // 4.4 将js脚本写入到clock文件夹下的index.js文件中
      fs.writeFile(path.join(__dirname,'/files/clock/index.js'),newJs,'utf-8',function(err){
          if(err){
              return console.log('写入js文件错误 '+err.message);
          }
          console.log('写入js文件成功');
      })
  }
  

⑤自定义 resolveHTML方法，来写入 index.htm文件

• 代码

  // 5.1 定义处理HTML文件的方法
  function resolveHTML (htmlStr){
      // 5.2 使用字符串的replace方法，把内嵌的<style>和</style>标签，替换为外联的<link>和<script>标签
      const newHTML=htmlStr.replace(regStyle,'<link rel="stylesheet" href="./index.css">')
      .replace(regScript,'<script src="./index.js"/>');
      // 5.3 将html写入clock目录下的index.html
      fs.writeFile(path.join(__dirname,'./files/clock/index.html'),newHTML,'utf-8',function(err){
          if(err) return console.log('写入HTML文件错误'+err.message);
          console.log('写入HTML文件成功');
      })
  }
  

完整代码

// 1.1 导入fs模块
const fs = require('fs');

// 1.2 导入path模块
const path = require('path');
const { resolve } = require('path/posix');

// 1.3定义正则表达式分别匹配<style></style>和<script></script>标签
//  其中/s表示匹配空字符， /S表示匹配非空字符，*表示匹配任意次
const regStyle = /<style>[\s\S]*<\/style>/;
const regScript = /<script>[\s\S]*<\/script>/;

// 2.1读取需要处理的html文件
fs.readFile(path.join(__dirname, './files/index.html'), 'utf-8', (err, data) => {
    // 2.2读取HTML文件失败
    if (err) {
        return console.log('读取失败' + err.message);
    }
    // 2.3 读取HTML文件成功后，调用对应的3个方法，分别拆解出css、js、html文件
    resolveCSS(data);
    resolveJS(data);
    resolveHTML(data);
});

// 3.1 定义处理css样式的方法
function resolveCSS(htmlStr) {

    // 3.2 使用正则提取需要的内容
    const r1 = regStyle.exec(htmlStr);
    // 3.3 进行字符串的替换操作
    const newCSS = r1[0].replace('<style>', '').replace('</style>', '');

    // 3.4 调用fs.writeFile()写入css样式，写入到clock文件夹下的index.css文件中
    fs.writeFile(path.join(__dirname, './files/clock/index.css'), newCSS, 'utf-8', function (err) {
        if (err) {
            return console.log('写入CSS样式失败' + err.message);
        }
        console.log('写入样式文件成功');
    })
}

// 4.1定义处理JS的方法
function resolveJS(htmlStr) {
    // 4.2 通过正则提取对应的script标签中的内容
    const r2 = regScript.exec(htmlStr);
    // 4.3 替换<script>和</script>标签为空
    const newJs = r2[0].replace('<script>', '').replace('</script>', '');
    // 4.4 将js脚本写入到clock文件夹下的index.js文件中
    fs.writeFile(path.join(__dirname, '/files/clock/index.js'), newJs, 'utf-8', function (err) {
        if (err) {
            return console.log('写入js文件错误 ' + err.message);
        }
        console.log('写入js文件成功');
    })
}

// 5.1 定义处理HTML文件的方法
function resolveHTML(htmlStr) {
    // 5.2 使用字符串的replace方法，把内嵌的<style>和</style>标签，替换为外联的<link>和<script>标签
    const newHTML = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./index.css">')
        .replace(regScript, '<script src="./index.js"/>');
    // 5.3 将html写入clock目录下的index.html
    fs.writeFile(path.join(__dirname, './files/clock/index.html'), newHTML, 'utf-8', function (err) {
        if (err) return console.log('写入HTML文件错误' + err.message);
        console.log('写入HTML文件成功');
    })
}

最终效果

得到了3个单独的文件，且css和js文件引入到了html文件中。