正则表达式搜索和替换内联 CSS 样式

Question

我需要在 HTML 标签内搜索并替换内联的 CSS，以避免使用内联的 style="" 属性。

即替换看起来像这样的东西：

<table border="0" cellpadding="0" cellspacing="0" width="100%"  style="font-family: Helvetica;line-height: 100%;margin-top: 20px; text-align: left;vertical-align: bottom;color: #202020">

变成这样的东西：

<table border="0" cellpadding="0" cellspacing="0" width="100%" font-family="Helvetica" line-height="100%" margin-top="20px" text-align="left" vertical-align="bottom" color="#202020">

有人知道我必须编写的用于搜索和替换的正则表达式吗？

谢谢。

Answer 1

你可以这样做：

匹配style="(.*?)"并将捕获的组保存到变量。
在该变量上，匹配 ([a-zA-Z-]+):\s*(.*?)\s*; 并将其替换为 {1}="{2}"。
将style=".*?"替换为数字2的结果

Answer 2

使用此正则表达式替换：

(?:\G(?!^)|\bstyle=")([^:]*):\s*([^;]*)[;"](?=[^>]*>)

替换为（注意最后的space）：

=""

这是一个demo

解释

(?:\G(?!^)|\bstyle=") - 我们将开始匹配的边界。边界是上一场比赛的结束（\G(?!^)）或style="（由于\bstyle="）。
([^:]*) - 第一个捕获组包含除 :
: - 文字 :
\s* - 0 个或更多白色space
([^;]*) - 第二个捕获组包含除 ;
[;"] - ; 或 "
(?=[^>]*>) - 我们检查结束边界以确保我们在结束标记内。

正则表达式搜索和替换内联 CSS 样式

Regex search & replace inline CSS style

html

css

regex

sublimetext2