如何编写正则表达式来查找/替换 HTML 类？ [复制]

Posted 2023-02-24

【中文标题】如何编写正则表达式来查找/替换 HTML 类？ [复制]

【英文标题】：How can I write a regular expression to find/replace HTML classes? [duplicate]

【发布时间】：2019-01-20 19:29:56

【问题描述】：

我正在尝试编写一个正则表达式，该表达式将匹配 html 文件中 HTML 元素上的每个单独的类，并允许我在每个类的末尾附加一个字符串。我正在使用 Atom，它是一个基本的文本编辑器，可让您使用正则表达式进行搜索。

我的最终目标是在页面上的每个 HTML 类上附加一个字符串。我不确定正则表达式究竟应该匹配什么以使替换更容易 - 也许在每个类之后匹配字符并将其替换为新文本加上旧字符以某种方式？这甚至可能吗？

例子：

<!-- Here I want to find 'container', then 'flex', then 'left'... -->
<div class="container flex left"></div>
<!-- And convert to... -->
<div class="container-new flex-new left-new"></div>


<!-- Here I want to match just on 'btn-1' -->
<label class="btn-1"></label>
<!-- and convert to: -->
<label class="btn-1-new"></label>

我知道我需要以某种方式使用前瞻和后视，现在我已经阅读了一些关于如何使用它们的教程，但仍在努力编写正则表达式来解决这个问题。

【问题讨论】：

Do not use regex to parse HTML.

在 Stack Overflow 上，每当有人看到 HTML 和正则表达式时，他们会立即假设他们正在尝试解析它，这真是太疯狂了……这只是一个简单的查找和追加。

@KhauriMcClain To parse something in this context = 在其他东西中“找到”一些东西，这就是解析器的用途。 This answer 准确解释了您可能如何尝试使用正则表达式“找到”一些简单的东西，但最终会得到意想不到的结果。

@AhmedAbdelhameed 他在文本编辑器中执行此操作，而不是应用程序。

@AhmedAbdelhameed 这不是解析的意思……粗略解析意味着分析，而不是查找。无论如何，这不是尝试解析 HTML 的任意嵌套结构，而是尝试修改字符串。 HTML 的结构对这个问题并不重要，因此它为什么不尝试解析 HTML。

【参考方案1】：

你可以试试：

替换：(class="[^"]*)\bbtn-1\b 与：$1-new

\b 匹配单词边界，这样可以确保您不会误匹配 btn-10。