什么是path路径模块

path模块是Node.js 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性，用来满足用户对路径的处理需求。

  • path.join0方法，用来将多个路径片段拼接成一个完整的路径字符串
  • path.basename0方法，用来从路径字符串中，将文件名解析出来

如果要在JavaScript代码中，使用path模块来处理路径，则需要使用如下的方式先导入它：

  1. path. join([... paths])

参数解读：

  • …paths 路径片段的序列
  • 返回值：

使用path.join0方法，可以把多个路径片段拼接为完整的路径字符串：

  1. const pathStr = path.join('/a'，'/b/c'，'../".*./d'，'e')
  2. console.log(pathStr)//输 lalbdve 
  3. const pathStr2 = path.join(__dirname，'./files/1.txt')
  4. console.log(pathStr2)//输 当前文件所处目录\files11.txt

获取路径中的文件名

path.basename（）的语法格式
使用 path.basename0方法，可以获取路径中的最后一部分，经常通过这个方法获取路径中的文件名，语法格式如下：

  1. path.basename(path[, ext])

参数解读：
path 必选参数，表示一个路径的字符串
ext 可选参数，表示文件
扩展名返回：表示路径中的最后一部分

  1. const path = require('path')
  3. //定义文件的存放路径
  4. const fpath= '/a/b/cd/index.html'
  5. const fullName = path.basename(fpath)
  6. console.log(fullName)
  8. const nameWithoutExt = path.basename(fpath,'.html')
  9. console.log(nameWithoutExt)

获取路径中的文件扩展名

.path.extname()的语法格式
使用 path.extname()方法，可以获取路径中的扩展名部分，语法格式如下：

  1. const path = require('path')
  3. //文件的存放路径
  4. const  fpath ='/a/b/c/d/index.html'
  5. const fext=path.extname(fpath)
  6. console.log(fext)

综合案例-时钟案例

  1. const fs= require('fs')
  2. const path =require('path')
  4. //1.3定义正则表达式，分别匹配<stylex/style>和<script>/script>
  5. const regStyle=/<style>[\s\S]*<\/style>/
  6. const regScript=/<script>[\s\S]*<\/script>/
  8. fs.readFile(path.join(__dirname,'index.html'),'utf8',function (err,dataStr){
  9.     if (err){
  10.         return console.log("读取错误"+err.message)
  11.     }
  12.     resolveCSS(dataStr)
  13.     resolveJS(dataStr)
  14.     resolveHtml(dataStr)
  15. })
  17. function resolveCSS(htmlStr){
  18.     const r1=regStyle.exec(htmlStr)
  19.     const newCSS= r1[0].replace('<style>','').replace('</style>','')
  20.     fs.writeFile(path.join(__dirname,'clock/index.css'),newCSS,function (err){
  21.         if (err){
  22.             return console.log('写入样式失败'+err.message)
  23.         }
  24.         console.log('写入成功')
  25.     })
  26. }
  29. function resolveJS(htmlStr){
  30.     const r2=regScript.exec(htmlStr)
  31.     const newScript=r2[0].replace('<script>','').replace('</script>','')
  32.     fs.writeFile(path.join(__dirname,'clock/index.js'),newScript,function (err){
  33.         if (err){
  34.             return console.log('写入Javascript失败'+err.message)
  35.         }
  36.         console.log('写入JS脚本成功')
  37.     })
  38. }
  41. function resolveHtml(htmlStr){
  42.     const newHtml= htmlStr.replace(regStyle,'<link rel="stylesheet" href="./index.css"/>').replace(regScript,'<script src="./index.js"><script></script>')
  43.     //写入index.html
  44.     fs.writeFile(path.join(__dirname,'./clock/index.html'),newHtml,function (err) {
  45.         if (err){
  46.             return console.log('写入HTML文件失败'+err.message)
  47.         }
  48.         console.log('写入HTML页面成功!')
  49.     })
  50. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>index首页</title>
  8.     <style>
  9.         html,
  10.         baby {
  11.             margin: 0;
  12.             padding: 0;
  13.             height: 100%;
  14.             background-image: linear-gradient(to bottom right, red, gold);
  15.         }
  17.         .box {
  18.             width: 400px;
  19.             height: 250px;
  20.             background-color: rgba(255, 255, 255, 0.6);
  21.             border-radius: 6px;
  22.             position: absolute;
  23.             left: 50%;
  24.             top: 40%;
  25.             transform: translate(-50%, -50%);
  26.             box-shadow: 1px 1px 10px #fff;
  27.             text-shadow: 0px 1px 30px white;
  28.             display: flex;
  29.             justify-content: space-around;
  30.             align-items: center;
  31.             font-size: 70px;
  32.             user-select: none;
  33.             padding: 0 20px;
  35.             /*    盒子投影*/
  36.             -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent),
  37.             color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42. <div class="box">
  43.     <div id="HH">00</div>
  44.     <div>:</div>
  45.     <div id="mm">00</div>
  46.     <div>:</div>
  47.     <div id="ss">00</div>
  48. </div>
  49. <script>
  50.     window.onload = function () {
  51.         //    定时器，每隔1秒执行1次
  52.         setInterval(() => {
  53.             var dt = new Date()
  54.             var HH = dt.getHours()
  55.             var mm = dt.getMinutes()
  56.             var ss = dt.getSeconds()
  58.             //    为页面上的元素赋值
  59.             document.querySelector('#HH').innerHTML = padZero(HH)
  60.             document.querySelector('#mm').innerHTML = padZero(mm)
  61.             document.querySelector('#ss').innerHTML = padZero(ss)
  62.         }, 1000)
  63.     }
  65.     //    补零函数
  66.     function padZero(n) {
  67.         return n > 9 ? n : '0' + n
  68.     }
  69. </script>
  70. </body>
  71. </html>