node.js读取、拆分HTML文件中的CSS、Script、HTML模块到不同文件

代码：

代码语言：javascript复制

const fs = require('fs')
const path = require('path')

// 匹配style标签的正则 s匹配所有空格；S匹配所有非空格；*代表无限次
const regStyle = /<style>[sS]*</style>/
// 匹配script标签的正则
const regScript = /<script>[sS]*</script>/

// 读取文件
fs.readFile(path.join(__dirname, './009-index.html'), 'utf-8', function (err, dataStr) {
    // 读取失败时直接return
    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)
    // 将提取出来的样式字符串，进行字符串的replace替换操作
    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('写入样式文件成功了！');
    })
}

// 定义处理script的方法
function resolveJS(htmlStr) {
    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('写入script失败！', err.message);
        console.log('写入script成功！');
    })
}

// 定义处理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失败！', er.message);
        console.log('写入HTML成功！');
    })
}

最终生成效果：

html script

0 人点赞