node.js输入项目目录结构并展示

简介: node.js输入项目目录结构并展示
const rootDir = path.resolve(__dirname);
let dirsStr = '';
const createDirTree = (dir, skip) => {
  const recur = (curDir) => {
    fs.readdirSync(curDir, { withFileTypes: true }).forEach((value) => {
      if (skip.includes(value.name)) return;
      const childPath = path.join(curDir, value.name);
      const depths = childPath.replace(rootDir, '').split(path.sep).filter(Boolean).length;
      const isDirectory = value.isDirectory();
      const prefix = `${'| '.repeat(depths - 1)}${isDirectory ? '+' : ''}-- `;
      console.log(`${prefix}${value.name}`);
      dirsStr += `${prefix}${value.name}\n`
      if (isDirectory) {
        recur(path.join(curDir, value.name));
      }
    });
  }
  recur(dir);
  const dirJson = { dirsStr: '`' + `${dirsStr}` + '`' }
  fs.writeFile('./src/Mock/dirs.json',JSON.stringify(dirJson) , function (err) { })
}
createDirTree(rootDir, ["node_modules", ".vscode", ".git", ".next", "_next"])

在html展示时,替换换行符为br

dirStr.value = dirs.dirsStr.replace(/(\n|\r|\r\n|↵)/g, '<br/>')

将字符串中的空格符替换成HTML中正确显示连续空格的&nbsp;转义字符

const text = 'Hello\s\s\sWorld\s2021'
text.replace(/\s/g, '&nbsp;');
相关文章
|
2月前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
2月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
42 0
|
2月前
|
JavaScript
vue.js项目评估流程图特效
vue.js项目评估流程图特效
86 2
vue.js项目评估流程图特效
|
6天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。Webpack的插件机制可扩展功能,支持热更新以加速开发流程。
13 2
|
19天前
|
JavaScript 开发工具 git
Vue.js 目录结构
Vue.js 目录结构
|
2月前
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为向后兼容版本,确保在旧环境运行。它在前端构建中不可或缺,提供语法转换、插件机制、灵活配置及丰富的生态系统,支持代码兼容性和自定义编译任务。**
20 6
|
2月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
2月前
|
JSON JavaScript 前端开发
vue项目使用Print.js插件实现PDF文件打印
vue项目使用Print.js插件实现PDF文件打印
63 0
|
2月前
|
XML JavaScript 前端开发
vue项目中使用bpmn.js详细流程(结合activiti版)
vue项目中使用bpmn.js详细流程(结合activiti版)
44 0
|
前端开发 JavaScript 索引