Use regular expressions to add new class to element using search/replace

Question

I want to add a NewClass value to the class attribute and modify the text of the span using find/replace functionality with a pair of regular expressions.

<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>

I am trying to get the following result using after search/replace:

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

Also curious to know if a single find/replace operation can been used for both tasks?

Is it PHP you are coding with? Please post the full HTML sample. — Wiktor Stribiżew, Oct 02 '15 at 16:51
I am looking for .NET Regex dialect. What I posted is the full HTML sample — 626, Oct 02 '15 at 17:29
I am still sure you can use HtmlAgilityPack to manipulate HTML in .NET. Are you coding in C# or VB.NET? — Wiktor Stribiżew, Oct 02 '15 at 18:43

OnlineCop · Accepted Answer · 2015-10-02T19:42:22.530

1

Regex can do this, but be aware the using regex to change HTML can have a lot of edge cases that you may not have accounted for.

This regex101 example shows those three <span> elements changed to add NewClass and the contents to be changed to Organization.

Other technologies, however, would be safer. jQuery, for example, could replace them regardless of the order of the attributes:

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

So just be careful with it, and you should be fine.

EDIT

According to comments on the OP, you want to only change the span containing ID phone$1, so the regex101 link has been updated to reflect this.

EDIT 2

Permalink was too long to fit into a comment, so adding the permalink here. Click on the "Content" tab at the bottom to see the replacement.

edited Oct 02 '15 at 19:42

answered Oct 02 '15 at 16:50

OnlineCop

4,019
23
35

Awesome, thanks! I'm trying to use the code on http://regexstorm.net/tester but it isn't working. I need it in .NET Regex dialect. – 626 Oct 02 '15 at 17:10
Edited post and added a permalink to regexstorm.net that shows the same inputs and regex working like on the regex101.com page. – OnlineCop Oct 02 '15 at 19:43
Perfect, exactly what I was looking for. Thank you! I will mark as answer. Could a single find/replace operation have been used for both tasks? – 626 Oct 02 '15 at 20:41

score 0 · Answer 2 · answered Oct 02 '15 at 16:50

You can use a regex like this:

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

With substitution string:

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

Working demo

Php code

$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);

Result

<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>

score 0 · Answer 3 · edited May 23 '17 at 11:58

Since your tags include preg_match and preg_replace, I think you are using PHP.

Regex is generally not a good idea to manipulate HTML or XML. See RegEx match open tags except XHTML self-contained tags SO post.

In PHP, you can use DOMDocument and DOMXPath with //span[@id="phone$1"] xpath (get all span tags with id attribute vlaue equal to 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();

See IDEONE demo

Result:

<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>

Use regular expressions to add new class to element using search/replace

3 Answers3