Заменить элементы списка, вложенные в определенный класс

Question

Я пытаюсь добавить html-разметку в неупорядоченный список с определенным классом.

Это HTML-код для начала:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>    
<ul class="foo">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

И я хотел бы закончитьс:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>    
<ul class="foo">
  <li><svg class="icon"><use xlink:href="#foo"></use></svg>Item 1</li>
  <li><svg class="icon"><use xlink:href="#foo"></use></svg>Item 2</li>
  <li><svg class="icon"><use xlink:href="#foo"></use></svg>Item 3</li>
</ul>

Я не нашел регулярное выражение, которое можно было бы использовать для запуска preg_replace (), которое может заставить это работать.

Контент создается с помощью Wordpress.Я хочу использовать фильтр, который сканирует the_content и добавляет дополнительную разметку.Таким образом:

function foo_ul($text) {
    //some function
    return $text;
}
add_filter('the_content', 'foo_ul');

Я не хочу полагаться на Javascript / jQuery, поэтому я хотел бы, чтобы это генерировалось на стороне сервера.

Есть идеи?

Answer 1

Использование регулярных выражений для сопоставления HTML не очень хорошо, как вы можете видеть в вопрос .Однако, если ваша строка соответствует тому, что вы показали в OP, вы можете использовать этот шаблон регулярных выражений, который выбирает каждую строку между <li></li> и добавляет к ней целевую строку.

$newHtml = preg_replace("/(?<=<li>)(.*)(?=<\/li>)/", '<svg class="icon"><use xlink:href="#foo"></use></svg>$1', $html);

Проверьте результат в demo

---

Обновление: Если у вас есть несколько ul и вы хотите сопоставить только .foo, используйте этот код

$newHtml = preg_replace_callback("/(?<=<ul\sclass=\"foo\">).*?(?=<\/ul>)/s", function($ma){
    return preg_replace("/(?<=<li>)(.*)(?=<\/li>)/", '<svg class="icon"><use xlink:href="#foo"></use></svg>$1', $ma[0]);
}, $html);

Проверьте результат в демо