css 文件重复类样式删除

上传文件 进行无关 className 删除
html 复制代码
<div style="display: flex;">
	<input type="file" @change="handleFileUpload" />
	<el-button @click="removeStyles" :disabled="!fileContent">Remove Styles and Download</el-button>
</div>
javascript 复制代码
 handleFileUpload(event) {
   console.log(event)
   const file = event.target.files[0]
   if (file) {
     const reader = new FileReader()
     reader.onload = e => {
       this.fileContent = e.target.result
     }
     reader.readAsText(file)
   }
 },
 removeStyles() {
   if (!this.fileContent) {
     return
   }
   let modifiedContent = this.fileContent
   this.allClassData.forEach(className => {
     const regex = new RegExp(`\\.${className}\\s*{[^}]*}`, 'g')
     modifiedContent = modifiedContent.replace(regex, '')
   })
   const blob = new Blob([modifiedContent], { type: 'text/css' })
   const link = document.createElement('a')
   link.href = URL.createObjectURL(blob)
   link.download = 'text2.scss'
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
 }
获取页面所有className
javascript 复制代码
let allClassNames = getAllClassNames().sort()
this.allClassData = allClassNames
console.log('店铺分析', allClassNames)
javascript 复制代码
export function getAllClassNames() {
  let classNames = new Set()

  function extractClassNames(element) {
    element.classList.forEach(className => {
      classNames.add(className)
    })

    Array.from(element.children).forEach(child => {
      extractClassNames(child)
    })
  }

  extractClassNames(document.body)

  return Array.from(classNames)
}
相关推荐
Yvonne爱编码2 分钟前
简述ajax、node.js、webpack、git
前端·git·ajax·webpack·node.js·visual studio
周小码2 分钟前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
哆啦A梦15886 分钟前
Element-Plus
前端·vue.js·ts
IT_陈寒13 分钟前
🔥3分钟掌握JavaScript性能优化:从V8引擎原理到5个实战提速技巧
前端·人工智能·后端
前端小巷子35 分钟前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia1 小时前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.1 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia1 小时前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
charlie1145141911 小时前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头1 小时前
前端img与background-image渲染图片对H5页面性能的影响
前端·css