上传文件 进行无关 className 删除
< div style = " display : flex; " >
< input type = " file" @change = " handleFileUpload" />
< el-button @click = " removeStyles" :disabled = " !fileContent" > Remove Styles and Download</ el-button>
</ div>
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
let allClassNames = getAllClassNames ( ) . sort ( )
this . allClassData = allClassNames
console. log ( '店铺分析' , allClassNames)
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)
}