正则去除行内css样式

4 篇文章 0 订阅

去除行内所有的css样式:
后台获取到的 html(string)难免会携带有行内css,这种行内样式甚是麻烦不如去掉重写

let dom="<div style="width:500px;height:100px;background-color:#000000;">你说啥,我木听清</div>"
let reg = /style\s*?=\s*?(['"])[\s\S]*?\1/g;
     console.log(dom.replace(reg,''));
     <div>你说啥,我木听清</div>
如果你想要同时匹配类名和对应的 CSS 样式,可以使用正则表达式来处理。 下面是一个示例,展示如何使用正则表达式匹配类名和对应的 CSS 样式: ```javascript const input = ` .class1 { color: red; font-size: 12px; } .class2 { background-color: blue; font-weight: bold; } .class3 { font-family: Arial, sans-serif; font-size: 14px; } `; const regex = /\.([a-zA-Z0-9_-]+)\s*{([^}]+)}/g; let match; const classAndStyles = {}; while ((match = regex.exec(input)) !== null) { const className = match[1]; const cssRules = match[2]; classAndStyles[className] = cssRules; } console.log(classAndStyles); ``` 这个示例,我们定义了一个包含类名和对应 CSS 样式的字符串 `input`。 然后,我们使用正则表达式 `\.([a-zA-Z0-9_-]+)\s*{([^}]+)}` 进行匹配。其 `\.` 表示匹配 `.` 字符,`([a-zA-Z0-9_-]+)` 表示匹配一个或多个字母、数字、下划线和破折号,并将其捕获为类名,`\s*` 表示匹配零个或多个空格,`{([^}]+)}` 表示匹配一对大括号内的内容,并将其捕获为 CSS 样式。 接下来,我们使用 `while` 循环和 `regex.exec(input)` 来执行匹配操作,并将每个匹配结果存储在 `match` 变量。 在循环,我们从每次匹配结果提取类名和对应的 CSS 样式,并将它们存储在 `classAndStyles` 对象,其类名作为键,CSS 样式作为值。 最后,我们输出 `classAndStyles` 对象,它包含了所有匹配的类名和对应的 CSS 样式。 请注意,上述示例使用了循环和正则表达式的 `exec()` 方法来实现全局匹配。你可以根据自己的需求进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值