JavaScript正则表达式匹配包含空格的字符串

Question

我需要匹配样式，比如颜色。以下是字符串：

<a href="#" style="margin:50px;color:2;">test</a>

以下是我的正则表达式：

/(color:(.);)/

现在它能工作了，我需要做什么才能使它也匹配color: 2;？

- Patrik Krehák

---

你为什么要像这样分解样式字符串呢？无论如何，答案是你需要找到一个神奇的正则表达式字符，它可以匹配一个空格，而且——想象一下——它就是一个空格！如果你希望这个空格是可选的，那么在其后加上?，这是在网上任何正则表达式介绍的第一页上都有记录的功能。那第一页还会讲另一个运算符，星号，它匹配零个或多个东西，所以 * 表示零个或多个空格，这可能是你要找的。 - user663031

我想要移除每个样式，除了颜色、字体大小等等。我在正则表达式方面是新手，所以我从简单的开始问起。 - Patrik Krehák

要操作样式，直接操作样式，例如 element.style.fontSize = '';。CSS是一种语言，尝试使用正则表达式解析或重写除最简单的语言之外的任何内容都不是一个好主意。它们会出错，并且难以维护。如果您想尝试使用正则表达式，请从一些更适合正则表达式的示例问题开始实验。 - user663031

我遇到了问题，TinyMCE对元素有样式。当你从TinyMCE复制带有样式的文本时，它会将其标记为HTML插入，但当你从其他网站或Word中复制时，它会以纯文本形式粘贴。我已经解决了这个问题，但当我选择项目、复制并粘贴到编辑器中时，所有样式（包括重置和另一个CSS等）都会出现，所以我必须删除每个不是通过TinyMCE直接添加的样式。 - Patrik Krehák

Answer 1

使用\s*匹配可选的空格字符：

/(color:\s*(.);)/

(.)只匹配单个字符的颜色。如果您想匹配具有更多字符的其他颜色，请使用以下正则表达式：

/(color:\s*([^\s;]+)\s*;)/

(使用 \S 匹配非空格字符)

- falsetru

---

color: 2怎么办？background-color: 2呢？color: 2;又怎么处理？此外，你的正则表达式只匹配单个字符的颜色。 - user663031

@torazaburo，感谢您指出这一点。我已经相应地更新了答案。 - falsetru

还有，谢谢你的更新，我本来想问这个问题的。但是当 color 不在结尾时，它不起作用。 - Patrik Krehák

@debute，您可以使用否定字符类来排除;：/(color:\s*([^\s;]+)\s*;)/。 - falsetru

这将贪婪地吃掉字符串中最后一个分号之前的所有内容。 - user663031