Regex php, replace ul li by div

Question

I have this list:

<ul>
    <li class="myclass">blablabla 1</li>
    <li class="myclass">blablabla 2</li>
    <li class="myclass">blablabla 3</li>
</ul>

And I want, with a regex, this:

<div class="newClass">blablabla 1</div>
<div class="newClass">blablabla 2</div>
<div class="newClass">blablabla 3</div>

Replacing only <li> works, with this regex:

$pattern = '#<li class="newClass">(.+)</li>#';
$replacement = '<div class="newClass">$1</div>';
$texte = preg_replace($pattern, $replacement, $texte);

I tried to replace the <ul> too, but it doesn't work:

$pattern = '#<ul>(<li class="myclass">(.+)</li>)*</ul>#';
$replacement = '<div class="newClass">$2</div>';
$texte = preg_replace($pattern, $replacement, $texte);

What is wrong?

[Don't parse HTML with regex!](http://stackoverflow.com/a/1732454/418066) — Biffen, Apr 13 '15 at 10:35

karthik manchala · Answer 1 · 2015-04-13T11:30:44.503

2

Your pattern is almost correct.

$pattern = '#<ul>(<li class="myclass">(.+)</li>)*</ul>#';

Although, there are multiple flaws in your pattern.

<ul> will assume that all your <li ... will start with <ul> which is not the case for <li class="myclass">blablabla 2</li>. So, you have to use it with ? and preferrably in a non capturing group.. i.e. (?:<ul>)? and similarly at the end (?:<\/ul>)? (note the escape character)
You are not checking for spaces and newlines before/after <li.. which should be changed to (\s*<li class="myclass">(.+)<\/li>\s*)
Also, no need to add * after (<li ...>...<\/li>)

Working modification of your pattern would be (?:<(?:ul|ol)>)?(\s*<li class="myclass">(.+)<\/li>\s*)(?:<\/(?:ul|ol)>)?

See demo for more explanation and exploration.

edited Apr 13 '15 at 11:30

answered Apr 13 '15 at 11:02

karthik manchala

13,492
1
31
55

Thanks a lot for explanations. It works but if i have another list as :
1. ...
The li are also replaced. There is no way to make this regex only for
inside

RenishV8

Apr 13 '15 at 11:25

This regex almost works : (?:

(.+)<\/li>\s*)*(?:<\/ul>) But it replaced all my list by one div. I updated the regex page : https://regex101.com/r/rK0yE7/4

– RenishV8 Apr 13 '15 at 12:34

No.. it matches only last capturing group. – karthik manchala Apr 13 '15 at 12:35

There is no solution to match all the list ? As a "loop", line per line ? – RenishV8 Apr 13 '15 at 12:45

There is.. but prefix and suffix here will not match per line.. either it is complicated and i have to learn more.. looking into it.. – karthik manchala Apr 13 '15 at 13:03

I'm looking for it. If i find i'll post it. Anyway thx a lot for your help :) – RenishV8 Apr 13 '15 at 13:12

Wiktor Stribiżew · Accepted Answer · 2015-04-14T07:47:47.757

You can perform all the <li> replacements outside of <ol>...</ol> tags with the following regex:

(?(DEFINE)(?<skip><ol>.*?<\/ol>))(?&skip)(*SKIP)(*FAIL)|\s*<li\s+class="myclass">(.*?)<\/li>\s*

(?(DEFINE)                  # We set up conditions
   (?<skip><ol>.*?<\/ol>))  # What we skip
   (?&skip)(*SKIP)(*FAIL)   # Fail what we skip
|                           # Else, match this
\s*<li\s+class="myclass">(.*?)<\/li>\s*

And replacement string will be:

<div class="newClass">$3</div>\n

Then, you will just have to remove <ul> and </ul> tags.

See the main regex demo here, and the sample program here.

<?php
   $str = "<ul>\n    <li class=\"myclass\">blablabla 1</li>\n    <li class=\"myclass\">blablabla 2</li>\n    <li class=\"myclass\">blablabla 3</li>\n</ul>\n<ol>\n    <li class=\"myclass\">blablabla 1</li>\n    <li class=\"myclass\">blablabla 2</li>\n    <li class=\"myclass\">blablabla 3</li>\n</ol>\n<ul>\n    <li class=\"myclass\">blablabla 1</li>\n    <li class=\"myclass\">blablabla 2</li>\n    <li class=\"myclass\">blablabla 3</li>\n</ul>"; 
   $re = "/(?(DEFINE)(?<skip><ol>.*?<\\/ol>))(?&skip)(*SKIP)(*FAIL)|\\s*<li\\s+class=\"myclass\">(.*?)<\\/li>\\s*/s"; 
   $subst = "<div class=\"newClass\">$3</div>\n";
   $result = preg_replace($re, $subst, $str);
   echo preg_replace("/<\/?ul>/", "", $result);
?>

Output:

<div class="newClass">blablabla 1</div>                                                                                                                                                                                                                
<div class="newClass">blablabla 2</div>                                                                                                                                                                                                                
<div class="newClass">blablabla 3</div>                                                                                                                                                                                                                

<ol>                                                                                                                                                                                                                                                   
    <li class="myclass">blablabla 1</li>                                                                                                                                                                                                               
    <li class="myclass">blablabla 2</li>                                                                                                                                                                                                               
    <li class="myclass">blablabla 3</li>                                                                                                                                                                                                               
</ol>                                                                                                                                                                                                                                                  
<div class="newClass">blablabla 1</div>                                                                                                                                                                                                                
<div class="newClass">blablabla 2</div>                                                                                                                                                                                                                
<div class="newClass">blablabla 3</div>

@laipreu: Please check my code, it will only replace `
`'s `
`s. — Wiktor Stribiżew, Apr 13 '15 at 13:52
it works thx, but i would like do it in one regex and i don't understand all yours. What is "Define", "", "*SKIP ", "*FAIL" and "" ? Thx ! — RenishV8, Apr 13 '15 at 14:57
I am using Perl-like work around to only capture li tags outside of ol tags. It is not possible to use one regex, as I am replacing with a non-empty string. You may use str_replace to delete ul tags after if you wish. — Wiktor Stribiżew, Apr 13 '15 at 15:02
I did it, to delete the good ul "preg_replace("#
\s*
([^\+]*)<\/ul>#", '
$1', $text)" Thx all works perfectly ! — RenishV8, Apr 14 '15 at 07:37
Awesome, my regex skills are up. Thx, i can't vote twice, but i would like \m/ — RenishV8, Apr 14 '15 at 09:19

Regex php, replace ul li by div

2 Answers2