美文网首页
时钟案例(读取文件,正则拆分文件,写入文件)

时钟案例(读取文件,正则拆分文件,写入文件)

作者: 圆滚滚大煤球 | 来源:发表于2021-11-13 16:16 被阅读0次

核心思路
1、导入fs模块,path模块
2、分别创建CSS,JS正则表达式
3、fs.readFile()读取index.html这个文件,成功后调用函数;
4、封装一个函数,定义正则表达式,分别匹配<script></script>和<style></style>标签
5、replace()方法去除标签;
6、将提取出来的css样式,写入对应的文件中

const fs = require('fs')
const path = require('path')
const { resolve } = require('path/posix')


// 定义正则表达式,分别匹配<script></script>和<style></style>标签

// [\s\S]匹配任意字符(空白字符+非空白字符) *匹配多次
const regStyle = /<style>[\s\S]*<\/style>/

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

// 使用fs.readFile()读取被处理的文件index.html
fs.readFile(path.join(__dirname,'/index.html'),'utf8',(err,dataStr)=>{
    if(err) {
        return console.log('读取失败!' + err);
    } 
    console.log('读取成功!');

    // 读取html文件成功后,调用对应的方法,拆解出html,css,js文件
    resolveCSS(dataStr)
    resolveJS(dataStr)
    resolveHTML(dataStr)

})

// 处理 CSS样式
function resolveCSS(htmlStr) {
    // 使用正则提取页面中<script></st>标签
    const r1 = regStyle.exec(htmlStr)

    // 将提取出来的样式字符串,进一步处理(删除<script></script>)
    const newCSS = r1[0].replace('<style>','').replace('</style>','')

    // 将提取出来的css样式,写入index.css文件中
    fs.writeFile(path.join(__dirname,'/clock/index.css'),newCSS, err => {
        if(err) {
            console.log('写入CSS样式失败!' + err);
        } console.log('写入CSS样式成功!');
    })
}

// 处理JS
function resolveJS(htmlStr) {
    // 使用正则提取页面中<script></script>标签
    const r2 = regScript.exec(htmlStr)

    // 将提取出来的样式字符串,进一步处理(删除<script></script>)
    const newJS = r2[0].replace('<script>','').replace('</script>','')

    // 将提取出来的css样式,写入index.css文件中
    fs.writeFile(path.join(__dirname,'/clock/index.js'),newJS, err => {
        if(err) {
            console.log('写入JS脚本失败!' + err);
        } console.log('写入JS脚本成功!');
    })
}

// 处理HTML
function resolveHTML(htmlStr) {

    // 将字符串调用replace()方法,将内嵌的<script></script>和<style></style>标签,替换成link 和script标签
    const newHTML = htmlStr.replace(regStyle,'<link rel="stylesheet" href="./index.css">').replace(regScript,'<script src="./index.js"></script>');
    // 将提取出来的css样式,写入index.css文件中
    fs.writeFile(path.join(__dirname,'./clock/index.html'),newHTML, err => {
        if(err) {
            console.log('写入html失败!' + err);
        } console.log('写入html成功!');
    })
}

相关文章

网友评论

      本文标题:时钟案例(读取文件,正则拆分文件,写入文件)

      本文链接:https://www.haomeiwen.com/subject/dvkzzltx.html