使用正则表达式通过搜索/替换向元素添加新类答案

【问题标题】：Use regular expressions to add new class to element using search/replace使用正则表达式通过搜索/替换向元素添加新类
【发布时间】：2015-10-02 16:34:34
【问题描述】：

我想为类属性添加一个 NewClass 值，并使用带有一对正则表达式的查找/替换功能修改跨度的文本。

<div>
   <span class='customer' id='phone$0'>Home</span>
<br/>
   <span class='customer' id='phone$1'>Business</span>
<br/>
   <span class='customer' id='phone$2'>Mobile</span>
</div>

我正在尝试使用 after search/replace 获得以下结果：

<span class='customer NewClass' id='phone$1'>Organization</span>

还想知道单个查找/替换操作是否可以用于两个任务？

【问题讨论】：

你想把这 3 行变成 1 行吗？
没有，只是想修改id为“phone1$”的span
您使用的是 PHP 编码吗？请发布完整的 HTML 示例。
我正在寻找 .NET 正则表达式方言。我发布的是完整的 HTML 示例
我仍然确信您可以使用 HtmlAgilityPack 在 .NET 中操作 HTML。你是用 C# 还是 VB.NET 编码？

标签： html .net regex

【解决方案1】：

Regex 可以做到这一点，但请注意，使用 regex 更改 HTML 可能有很多您可能没有考虑到的边缘情况。

This regex101 example 显示这三个<span> 元素更改为添加NewClass 以及要更改为Organization 的内容。

但是，其他技术会更安全。例如，jQuery 可以替换它们而不管属性的顺序如何：

$("span#phone$1").addClass("NewClass");
$("span#phone$1").text("Organization");

所以小心点，你应该没事的。

编辑

根据 OP 上的 cmets，您只想更改包含 ID phone$1 的跨度，因此已更新 regex101 链接以反映这一点。

编辑 2

固定链接太长，无法放入评论，因此请在此处添加 the permalink。点击底部的“内容”标签查看替换。

【讨论】：

太棒了，谢谢！我正在尝试使用regexstorm.net/tester 上的代码，但它不起作用。我需要 .NET 正则表达式方言。
编辑了帖子并添加了一个指向 regexstorm.net 的永久链接，该链接显示了与 regex101.com 页面上相同的输入和正则表达式。
完美，正是我想要的。谢谢！我将标记为答案。两个任务都可以使用单个查找/替换操作吗？

【解决方案2】：

您可以像这样使用正则表达式：

'.*?' id='phone\$1'>.*?<

带替换字符串：

'customer' id='phone\$1'>Organization<

Working demo

php代码

$re = "/'.*?' id='phone\\$1'>.*?</"; 
$str = "<div>\n   <span class='customer' id='phone\$0'>Home</span>\n<br/>\n   <span class='customer' id='phone\$1'>Business</span>\n<br/>\n   <span class='customer' id='phone\$2'>Mobile</span>\n</div>"; 
$subst = "'customerNewClass' id='phone\$1'>Organization<"; 

$result = preg_replace($re, $subst, $str);

结果

<div>
   <span class='customer' id='phone$0'>Home</span>
<br/>
   <span class='customerNewClass' id='phone$1'>Organization</span>
<br/>
   <span class='customer' id='phone$2'>Mobile</span>
</div>

【讨论】：

【解决方案3】：

由于您的标签包括preg_match 和preg_replace，我认为您使用的是PHP。

Regex 通常不是操作 HTML 或 XML 的好主意。见RegEx match open tags except XHTML self-contained tags SO post。

在 PHP 中，您可以将 DOMDocument 和 DOMXPath 与//span[@id="phone$1"] xpath 一起使用（获取所有span 标记，id 属性值等于phone$1）：

$html =<<<DATA
<div>
   <span class='customer' id='phone$0'>Home</span>
<br/>
   <span class='customer' id='phone$1'>Business</span>
<br/>
   <span class='customer' id='phone$2'>Mobile</span>
</div>
DATA;
$dom = new DOMDocument('1.0', 'UTF-8');
$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xp = new DOMXPath($dom);
$sps = $xp->query('//span[@id="phone$1"]');
foreach ($sps as $sp) {
    $sp->setAttribute('class', $sp->getAttribute('class') . ' NewClass');
    $sp->nodeValue = 'Organization';
}
echo $dom->saveHTML();

见IDEONE demo

结果：

<div>
   <span class="customer" id="phone$0">Home</span>
<br>
   <span class="customer NewClass" id="phone$1">Organization</span>
<br>
   <span class="customer" id="phone$2">Mobile</span>
</div>

【讨论】：