上传文件 进行无关 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)
}