正则表达式匹配 HTML 样式属性答案

【问题标题】：Regex to Match HTML Style Properties正则表达式匹配 HTML 样式属性
【发布时间】：2010-11-24 11:26:41
【问题描述】：

这里需要一个正则表达式大师！

<img src="\img.gif" style="float:left; border:0" />
<img src="\img.gif" style="border:0; float:right" />

鉴于上述 HTML，我需要一个匹配“float:right”或“float:left”但仅在 img 标签上的正则表达式模式。

提前致谢！

【问题讨论】：

【解决方案1】：

/<img\s[^>]*style\s*=\s*"[^"]*\bfloat\s*:\s*(left|right)[^"]*"/i

但是，必须建议您：根据我的经验，无论您编写什么正则表达式，有人都能够提出有效的 HTML 来破坏它。如果您真的想以通用、可靠的方式执行此操作，则需要解析 HTML，而不是向其抛出正则表达式。

【讨论】：

不知道为什么有人会这样做，但是<img ... alt='style="float:left"' style="float:right"...>
或者使用单引号作为样式属性。或者使用 no 引号作为样式属性。或者在 style 属性之前将整个 HTML 标记嵌入到有效支持它作为值的属性中。就像我说的，如果你想要任何接近可靠性的东西，你必须解析。
不用担心，在这种情况下，我生成了html，如果它无效，那是我的错。 :) 不过感谢您的建议！
令我惊讶的是，人们一直在尝试使用正则表达式来解析 HTML。我今天早些时候看到了一个类似的问题。我什至试图回答它——结果弄错了，还有其他几张海报。我们没有考虑嵌套标签。使用解析器。使用 DOM。它将可靠地工作，而正则表达式则不会。（正则表达式在某些方面非常有用 - 但不适用于解析 HTML 或 XML。）
@TrueWill - 使用 Telligent Community 5，我有一个高级文本编辑器，允许用户左对齐或右对齐图像。它通过向 img 添加浮点数来实现这一点。我需要图像在与其浮动方向相同的一侧没有边距。我修改了正则表达式以捕获整个图像标签，然后在保存编辑器中的内容后，浮点值与
$1
匹配/替换。除了在将内容提交到数据库之前运行此正则表达式之外，我还有哪些选择？

【解决方案2】：

你真的不应该使用正则表达式来解析 html 或 xml，设计一个可以处理所有极端情况的万无一失的正则表达式是不可能的。相反，我建议为您选择的语言找到一个 html 解析库。

也就是说，这是一个使用正则表达式的可能解决方案。

<img\s[^>]*?style\s*=\s*".*?(?<"|;)(float:.*?)(?=;|").*?"

“float:”将在唯一的捕获组中被捕获，应该是数字 1。

正则表达式基本上匹配 img 标记的开头，后跟任意类型的非右括号字符，然后是样式属性。在 style 属性的值中，float: 可以在属性中的任何位置，但它应该只匹配实际的 float 样式（即，它前面是属性的开头或分号，后面是分号或属性的结尾） .

【讨论】：

【解决方案3】：

我同意 Sean Nyman 的观点，最好不要使用正则表达式（至少不要用于任何永久性的）。对于一些特别的和更耐用的东西，你可以尝试：

/<img\s(?:\s*\w+\s*=\s*(?:'[^']*'|"[^"]*"))*?\s*\bstyle\s*=\s*(?:"[^"]*?\bfloat\s*:\s*(\w+)|'[^']*?float\s*:\s*(\w+)/i

【讨论】：