Javascript 正则表达式删除所有样式，但保留颜色和背景色（如果存在）

我仍然无法背诵正则表达式，因此无法找到最终解决方案，使用带有Javascript的正则表达式从

…

中删除所有样式，但保留颜色和背景色（如果存在）。

我发现：

1。使用正则表达式删除完整的style=“…”元素：

htmlString = (htmlString).replace(/(<[^>]+) style=".*?"/i, '');

htmlString = (htmlString).replace(/font-family\:[^;]+;?|font-size\:[^;]+;?|line-height\:[^;]+;?/g, '');

<p style="font-family:Garamond;font-size:8px;line-height:14px;color:#FF0000;">example</p>

<p style="font-family:Garamond;font-size:8px;line-height:14px;">example</p>

挑战：如果我们删除所有指定的样式（不存在颜色），并且样式为空（我们有style=”“或style=“”），则样式属性也应删除

我想我们需要两行代码

感谢您的帮助

示例1（白名单中的“颜色”保留）：

htmlString = (htmlString).replace(/(<[^>]+) style=".*?"/i, '');

htmlString = (htmlString).replace(/font-family\:[^;]+;?|font-size\:[^;]+;?|line-height\:[^;]+;?/g, '');

<p style="font-family:Garamond;font-size:8px;line-height:14px;color:#FF0000;">example</p>

<p style="font-family:Garamond;font-size:8px;line-height:14px;">example</p>

示例

应成为：

<p style="color:#FF0000;">example</p>

<p>example</p>

示例

示例2（所有样式模具）：

htmlString = (htmlString).replace(/(<[^>]+) style=".*?"/i, '');

htmlString = (htmlString).replace(/font-family\:[^;]+;?|font-size\:[^;]+;?|line-height\:[^;]+;?/g, '');

<p style="font-family:Garamond;font-size:8px;line-height:14px;color:#FF0000;">example</p>

<p style="font-family:Garamond;font-size:8px;line-height:14px;">example</p>

示例

应成为：

<p style="color:#FF0000;">example</p>

<p>example</p>

示例

首先，概念证明。退房

正则表达式如下所示：

/(<[^>]+\s+)(?:style\s*=\s*"(?!(?:|[^"]*[;\s])color\s*:[^";]*)(?!(?:|[^"]*[;\s])background-color\s*:[^";]*)[^"]*"|(style\s*=\s*")(?=(?:|[^"]*[;\s])(color\s*:[^";]*))?(?=(?:|[^"]*)(;))?(?=(?:|[^"]*[;\s])(background-color\s*:[^";]*))?[^"]*("))/i

应该始终构建您希望留下的内容

如果不清楚的话，这里的技巧是将“否定”放在第一位，这样只有在否定的情况下，捕获（例如样式属性本身）才会被替换的情况填充。否则，捕获默认为nothing，因此即使是style属性也不会显示。

要在JavaScript中执行此操作，请执行以下操作：

htmlString = htmlString.replace(

    /(<[^>]+\s+)(?:style\s*=\s*"(?!(?:|[^"]*[;\s])color\s*:[^";]*)(?!(?:|[^"]*[;\s])background-color\s*:[^";]*)[^"]*"|(style\s*=\s*")(?=(?:|[^"]*[;\s])(color\s*:[^";]*))?(?=(?:|[^"]*)(;))?(?=(?:|[^"]*[;\s])(background-color\s*:[^";]*))?[^"]*("))/gi,

    function (match, $1, $2, $3, $4, $5, $6, offset, string) {
        return $1 + ($2 ? $2       : '') + ($3 ? $3 + ';' : '')
                  + ($5 ? $5 + ';' : '') + ($2 ? $6       : '');
    }

);

htmlString=htmlString.replace(
/（s）颜色；颜色：s*：：：；；s*：；；；s）颜色：s*：：；；；；；；；；；；；；；；；；；；；；；；；（（（：：：：：；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；（（（（（（（；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；（“”）/gi，
函数（匹配、$1、$2、$3、$4、$5、$6、偏移量、字符串）{
返回$1+（$2？$2:“）+（$3？$3+”；“：”）
+ ($5 ? $5 + ';' : '') + ($2 ? $6       : '');
}
);

---

请注意，我这样做是为了好玩，并不是因为这是解决这个问题的方法。此外，我知道分号捕获很有技巧，但这是一种方法。通过上面的分解，可以推断出如何扩展样式的白名单。

不要用正则表达式解析或修改HTML。它不会很好地结束。我知道这个讨论谢谢：）对于我的情况，使用正则表达式是可以的。它不是，它永远都不是好的，它充其量是可行的。改进你的方式…请“无论我们说多少次，它们每天都不会停止来…”+1---但是，我上面的示例可以用于其他场景（XML），并且不能绑定到HTML；）我假设您不知道样式属性在之前的显示顺序，对吗？因为真的，在这种情况下，使用regex.+1.Yikes不会得到令人满意的解决方案。好的，从技术上讲，它不是纯regex替换，因为您需要额外的程序逻辑来选择替换，但是绝对是对regex勇敢的赞誉！@TimPietzcker-好吧，这是唯一的JavaScript，即（1）要使用反向引用，需要调用一个函数，以及（2）未捕获的组不会默认为空字符串，因此您不能将它们全部连接起来。但是，是的，我可以看出我的声明可能误导了您！回答得很好，您也解释了部分，这很好！我在问题中的两个示例上都使用了您的javascript代码，但是，第一个示例变成：

示例

，而不是

示例”

？你确定吗？它对我有效。这是一个示例。我刚刚意识到它在我的工作计算机（运行Internet Explorer 8）上有效，但在其他浏览器上无效！难怪你说它不起作用。我必须在家里再看一遍。