node.js时钟案例（文件的拆分和写入）

江淮-Z

已于 2022-12-11 14:42:45 修改

阅读量232

点赞数

分类专栏： node.js JavaScript HTML5+CSS3 文章标签：前端 html

于 2022-12-10 21:11:30 首次发布

本文链接：https://blog.csdn.net/qq_52031408/article/details/128269150

版权

node.js 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

JavaScript

12 篇文章 0 订阅

订阅专栏

HTML5+CSS3

10 篇文章 0 订阅

订阅专栏

1. 案例要实现的功能

2. 案例的实现步骤

3.实现步骤：

1. 案例要实现的功能

将素材目录下的 index.html 页面，拆分成三个文件，分别是：

index.css

index.js

new index.html

并且将拆分出来的 3 个文件写入到一个路径

2. 案例的实现步骤

① 创建两个正则表达式，分别用来匹配 <style> 和 <script> 标签

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

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

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

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

3.实现步骤：

待处理的文件，我们要把其中的style样式和script提取成外联的，并生成一个新的index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index首页</title>
  
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-image: linear-gradient(to bottom right, red, gold);
    }

    .box {
      width: 400px;
      height: 250px;
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 6px;
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      box-shadow: 1px 1px 10px #fff;
      text-shadow: 0px 1px 30px white;

      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 70px;
      user-select: none;
      padding: 0 20px;

      /* 盒子投影 */
      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));
    }
  </style>
</head>

<body>
  <div class="box">
    <div id="HH">00</div>
    <div>:</div>
    <div id="mm">00</div>
    <div>:</div>
    <div id="ss">00</div>
  </div>

  <script>
    window.onload = function () {
      // 定时器，每隔 1 秒执行 1 次
      setInterval(() => {
        var dt = new Date()
        var HH = dt.getHours()
        var mm = dt.getMinutes()
        var ss = dt.getSeconds()

        // 为页面上的元素赋值
        document.querySelector('#HH').innerHTML = padZero(HH)
        document.querySelector('#mm').innerHTML = padZero(mm)
        document.querySelector('#ss').innerHTML = padZero(ss)
      }, 1000)
    }

    // 补零函数
    function padZero(n) {
      return n > 9 ? n : '0' + n
    }
  </script>
</body>

</html>

我们编写的实现过程：

//导入fsmok
const fs = require('fs')

//导入path模块
const path = require('path')

//定义正则表达式，分别匹配<style></style>,<script></script>标签。
const regStyle = /<style>[\s\S]*<\/style>/

const regScript = /<script>[\s\S]*<\/script>/

//调用fs.readFile()方法读取文件
fs.readFile(path.join(__dirname, './files/index.html'), 'utf-8', function (err, dataStr) {
    //若读取失败
    if (err) {
        return console.log('读取HTML文件失败' + err.message);
    }
    //读取成功时，调用对应的三个方法，分别拆出css,js,html文件
    resolveCSS(dataStr)
    resolveJS(dataStr)
    resolveHTML(dataStr)
})

//定义处理CSS的函数
function resolveCSS(htmlStr) {
    //使用正则提取需要的内容
    const r1 = regStyle.exec(htmlStr)
    //console.log(r1);

    //将提取的CSS进行处理
    const newCSS = r1[0].replace('<style>', '').replace('</style>', '')
    //console.log(newCSS);

    //调用fs.writeFile()方法，把处理的文件重新写入，并命名为index.css
    fs.writeFile(path.join(__dirname, './files/index.css'), newCSS, function (err) {
        if (err) {
            return console.log('写入newCSS文件失败' + err.message);
        }
        console.log('写入newCSS样式文件成功');
    })
}

//定义处理JS的函数
function resolveJS(htmlStr) {
    //使用正则提取需要的内容
    const r2 = regScript.exec(htmlStr)
    //console.log(r2);

    //将提取的CSS进行处理
    const newJS = r2[0].replace('<script>', '').replace('</script>', '')
    //console.log(newJS);

    //调用fs.writeFile()方法，把处理的文件重新写入，并命名为index.css
    fs.writeFile(path.join(__dirname, './files/index.js'), newJS, function (err) {
        if (err) {
            return console.log('写入newJS文件失败' + err.message);
        }
        console.log('写入newJS文件成功');
    })
}

//定义处理HTML结构的方法
function resolveHTML(htmlStr) {
    //将字符串调用replace方法，把内嵌的style和script标签，替换为外联的link和script标签
    const newHTML = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./index.css" />').replace(regScript, '<script src="./index.js"></script>')
    //调用fs.writeFile()写入文件
    fs.writeFile(path.join(__dirname, './files/newindex.html'), newHTML, function (err) {
        if (err) {
            return console.log('写入HTML文件失败' + err.message);
        }
        console.log('写入HTML页面成功');
    })
}

执行代码：

结果：

newindex.html代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index首页</title>
  
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <div class="box">
    <div id="HH">00</div>
    <div>:</div>
    <div id="mm">00</div>
    <div>:</div>
    <div id="ss">00</div>
  </div>

  <script src="./index.js"></script>
</body>

</html>