正则替换HTML里的style属性

时间:2023-03-09 07:06:25
正则替换HTML里的style属性

一个网友问:

<p class="a" style="font-size: 12pt;  font-family: ""; color: red;">a</p>

如何替换成:

<p class="a" >a</p>

以为So easy,写个正则匹配一下就OK了,

/style="[^"]*?"/g

结果生成结果如下:

<p class="a" "; color: red;">a</p>

原来忽略了style="中间有双引号"

琢磨后,

改进了正则表达式:

var a=`<p class="a" style="font-size: 12pt;  font-family: ""; color: red;">a</p>`

var reg4 = /style="[^=]*?"([(\s+\w+=)|>])/g

a.replace(reg4,'$1')

最终生成结果:

<p class="a" >a</p>

"和>之间还多了一个空格。基本上达到了要求。

原理,style后的内容非贪婪匹配,以一个=号或是>号结尾,后面那部分要用分组($1)替换回来

20190107,反馈有问题,改进:

 var a=` <span style="font-family: "Times New Roman";" class="abc">`
var reg4 = /style="[^=>]*"([(\s+\w+=)|>])/g
a.replace(reg4,'$1') 

把非贪婪匹配改为了贪婪匹配。