fs和path模块小测试-优快云博客

本文链接：https://blog.youkuaiyun.com/CodePrincess/article/details/134850779

文章描述了如何使用Node.js和正则表达式将HTML文件中的`<style>`和`<script>`标签提取出来，分别写入`index.css`和`index.js`文件中，同时保持HTML结构的完整性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将该html页面拆分成三个文件
index.css
index.js
index.html

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="box">1</div>
    <button>加1</button>
</body>
<script>
    const dom_box=document.getElementById('box');
    const btn=document.getElementsByTagName('button')[0];
    btn.οnclick=function(){
       let num= dom_box.innerText-0;
       num++;
       dom_box.innerText=num;
    }
   
</script>
</html>

demo.js

思路

定义正则表达式匹配

const fs=require('fs');
const path=require('path');
const regStyle = /<style>[\s\S]*<\/style>/,
    regScript=/<script>[\s\S]*<\/script>/;
let index_path=path.join(__dirname,'demo.html');
// let index_path='./demo.html';
fs.readFile(index_path,'utf8',function(err,data){
    if(!err){
        // console.log(data);//获取到html文件内容
        // console.log(typeof data);//获取到html文件内容
       // 定义正则表达式 <style> <script>标签
        // 匹配字符串
        // let style = data.match(regStyle)[0];
        // let script = data.match(regScript);
        // console.log(style);
        // const style=document.getElementsByTagName('style')[0].innerText
        resolveCss(data);
        resolveJs(data);
        resolveHtml(data);

    }
});
let path_style=path.join(__dirname,'index.css');
let path_js=path.join(__dirname,'index.js');
let path_html=path.join(__dirname,'index.html');

function resolveCss(data){//fs.writeFile(file, data[, options], callback)
    // let r1=regStyle.exec(data);
    let r1=data.match(regStyle);
    let newCss=r1[0].replace(/<style>/,'').replace(/<\/style>/,''); //这个变量之前命名是data_style，newCss命名更好，和.css后缀命名类似
    write_file_method(path_style,newCss,'','index.css');
}
function resolveJs(data){
    // let r2=regScript.exec(data);
    let r2=data.match(regScript);
    let newJS=r2[0].replace(/<script>/,'').replace(/<\/script>/,'');
    write_file_method(path_js,newJS,'','index.js');
}
function resolveHtml(data){//链接中的路径是反斜杠\  怎么转化成/
    // let data_style_js=regStyle.exec(data)[0],
    //     data_js=regScript.exec(data)[0];

    /*写法一*/
    // let data_style=data.match(regStyle)[0],
    // data_js=data.match(regScript)[0];
    // let newHtml=data.replace(data_style,`<link rel="stylesheet" href="${path_style}"/>`).replace(data_js,`<script src="${path_js}"></script>
    // `);

    /*写法二*/
    let newHtml=data.replace(regStyle,`<link rel="stylesheet" href="${path_style}"/>`).replace(regScript,`<script src="${path_js}"></script>
    `);
    write_file_method(path_html,newHtml,'utf8','index.html');
}
function write_file_method(url,data,options,filename){
    fs.writeFile(url,data,options,function(err){
        if(err){
            console.log(`写入${filename}文件失败`+err.message);
        }else{
            console.log(`写入${filename}文件成功`);
        }
    })
}