ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

综合案例- 时钟案例

2022-04-14 09:02:58  阅读:161  来源: 互联网

标签:index fs const log err 写入 案例 综合 时钟


案例要实现的内容

案例实现步骤

  1. 创建两个正则表达式,分别用来匹配 < style > 和 < script > 标签
  2. 使用 fs 模块,读取需要被处理的 HTML 文件
  3. 自定义 resolveCSS 方法,来写入 index.css 样式文件
  4. 自定义 resolveJS 方法,来写入 index.js 脚本文件
  5. 自定义 resolveHTML 方法,来写入 index.html 文件
  • 导入模块
//导入fs模块
const fs = require('fs')
//导入path模块
const path = require('path')
  • 定义正则表达式
// 定义正则表达式
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/
  • 处理文档
//使用fs模块读取需要处理的html文件

fs.readFile(path.join(__dirname, './clock/index.html'), 'utf-8', (err, dataStr) => {
  //读取HTML文件失败
  if (err) return console.log('文件读取失败!' + err.message)
  resolveCSS(dataStr)
  //读取HTML文件成功后,调用方法
  resolveJS(dataStr)

  resolveHTML(dataStr)
})


function resolveCSS(htmlStr) {
  //使用正则表达式来提取出style标签里面的内容
  const r1 = regStyle.exec(htmlStr)
  //将提取出来的样式字符串,做进一步的处理(替换处理)
  const newCSS = r1[0].replace('<style>', '').replace('</style>', '')
  fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, err => {
    if (err) {
      return console.log('写入css样式失败!' + err.message);
    }
    console.log('写入CSS样式成功');
  })
}

function resolveJS(htmlStr) {
  //使用正则表达式提取出 script标签里面的内容
  const r2 = regScript.exec(htmlStr)
  const newJS = r2[0].replace('<script>', '').replace('</script>', '')

  fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, err => {
    if (err) {
      return console.log('写入Js失败!' + err.message);
    }
    console.log('写入JS成功');
  })
}

//定义处理 HTML 结构的方法
function resolveHTML(htmlStr) {
  const newHTML = htmlStr
    .replace(regStyle, '<link rel="stylesheet" href="./index.css" />')
    .replace(regScript, '<script src="./index.js"></script>')
  //接下来写入文档中
  fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, err => {
    if (err) {
      return console.log('html文件写入失败' + err.message);
    }
    return console.log('html文件写入成功!');
  })

}

标签:index,fs,const,log,err,写入,案例,综合,时钟
来源: https://www.cnblogs.com/liyublogs/p/16142998.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有