正则表达式保持指定的CSS规则

时间:2015-10-21 16:12:45

标签: css regex

花了几个小时在这上面做了很多搜索而且无处可去。寻求RegEx大师的帮助。我正在寻找可以删除除我指定的CSS样式规则之外的所有CSS样式规则的RegEx。例如,请输入以下示例:

<p style="font-size:10px">Text.</p>
<p><span style="font-size:12px; text-transform:uppercase">More text</span></p>
<p><span style="text-decoration:line-through; text-transform:uppercase;">Even more</span></p>

我正在寻找这个输出:

<p>Text.</p>
<p><span style="text-transform:uppercase">More text</span></p>
<p><span style="text-decoration:line-through; text-transform:uppercase;">Even more</span></p>

所以只保留text-transform:uppercasetext-decoration:underline。如果需要在几个RegExes中解决这个问题,那很好。即第一个留下空的style=""标签,我可以删除它们。这里的关键是我要指定要保留的规则,而不是要删除的所有可能规则。

感谢您的帮助

更新: 我最接近的是:

style=".*?(text-decoration:line-through|text-transform:uppercase)*.*?"

并替换为$ 1。问题是当我在捕获组之后添加*时,它没有捕获我想要保留的规则。

2 个答案:

答案 0 :(得分:0)

我认为黑名单比这里的白名单容易。在我深入研究之前,我先试一试。

/(font-size|color):[^;]+(; |)?/g

这是我的测试:

var test = 'style="font-size:12px; color:red; background:blue; color:blue"'

// style="background:blue; "
test.replace(/(font-size|color):[^;]+(; |)?/g, '');

在您说CSS一致后编辑它。

答案 1 :(得分:0)

好吧,看起来我不会得到白名单,所以我继续推行黑名单。经过进一步测试,比尔的问题导致它不仅仅与CSS相匹配。所以我想出了以下似乎运作良好的,主要基于比尔的想法,所以感谢他的发帖。

(font-size|color):.*?(;|(?="))

如果有人想出一个解决方案,我仍然愿意接受白名单解决方案。