Find and Transform image tags in a block of text

0
votes

I am trying to use PHP to find all IMG tags within a block of text $content and replace them with liquid template tags, while retaining their placement within the text and the src and alt text for each one.

Example $content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

<img src="http://example.com/frog.jpg" alt="frog desc" />

Nunc feugiat lorem tellus, et sollicitudin eros feugiat vitae. Aliquam auctor velit nec auctor semper

<img src="http://example.com/snake.jpg" alt="snake desc" />

Donec egestas felis id turpis sollicitudin blandit vitae quis libero. Ut massa arcu, condimentum vitae laoreet auctor, blandit sit amet enim.

<img src="http://example.com/toad.jpg" alt="toad desc" />

<img src="http://example.com/lizard.jpg" alt="lizard desc" />

Maecenas vel purus nec mauris dignissim pellentesque.

Transformed text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

{% img="frog.jpg" alt="frog desc" %}

Nunc feugiat lorem tellus, et sollicitudin eros feugiat vitae. Aliquam auctor velit nec auctor semper

{% img="snake.jpg" alt="snake desc" %}

Donec egestas felis id turpis sollicitudin blandit vitae quis libero. Ut massa arcu, condimentum vitae laoreet auctor, blandit sit amet enim.

{% img="toad.jpg" alt="toad desc" %}

{% img="lizard.jpg" alt="lizard desc" %}

So far, I went down one path of extracting all the images and their attributes into an array using: How to extract img src, title and alt from html using php? but found it was hard to re-insert the images back into the text at their original location.

Any advice would be appreciated :)

PS — Here is the image string I am trying to affect:

<img src="http://localhost/wp/wp-content/uploads/2017/05/IMG_0061-300x225.jpg" alt="garden image" width="300" height="225" class="alignnone size-medium wp-image-386916" />
2
phpregexreplace

2 Answers

1
votes

Try this, hope this will be helpful.

Regex demo

Regex: <img.*?src=".*\/(?!>)([^"]+)"\s+alt="([^"]+)"[^>]+>

1. <img.*?src=" This will match <img , then all till src="

2. .*\/(?!>) this will match all till / there next character is not >

3. ([^"]+) This will match all till except " and () will capture this in first group.

4. "\s+alt=" this will match " then some spaces then alt="

5. ([^"]+)" this will match all except " then match " then () will capture this in second group.

6. [^>]+> this will match except > and then match this >

Replacement: {% img="$1" alt="$2" %}

Try this code snippet here

<?php

$string=<<<HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

<img src="http://example.com/frog.jpg" alt="frog" />

Nunc feugiat lorem tellus, et sollicitudin eros feugiat vitae. Aliquam auctor velit nec auctor semper

<img src="http://example.com/snake.jpg" alt="snake" />

Donec egestas felis id turpis sollicitudin blandit vitae quis libero. Ut massa arcu, condimentum vitae laoreet auctor, blandit sit amet enim.

<img src="http://example.com/toad.jpg" alt="toad" />

<img src="http://example.com/lizard.jpg" alt="lizard" />

Maecenas vel purus nec mauris dignissim pellentesque. 
HTML;
echo preg_replace('/<img.*?src=".*\/(?!>)([^"]+)"\s+alt="([^"]+)"[^>]+>/', '{% img="$1" alt="$2" %}', $string);
0
votes

While Sahil's pattern does return the desired effect, it is not as efficient as it could/should be. It makes too many capture groups, and takes 60% more steps than my pattern.

Use this pattern instead: /<img src="[^"]*\/([^"]+" alt="[^"]+") \/>/ (Pattern Demo)

Implementation (PHP Demo):

$content='
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

<img src="http://example.com/frog.jpg" alt="frog" />

Nunc feugiat lorem tellus, et sollicitudin eros feugiat vitae. Aliquam auctor velit nec auctor semper

<img src="http://example.com/snake.jpg" alt="snake" />

Donec egestas felis id turpis sollicitudin blandit vitae quis libero. Ut massa arcu, condimentum vitae laoreet auctor, blandit sit amet enim.

<img src="http://example.com/toad.jpg" alt="toad" />

<img src="http://example.com/lizard.jpg" alt="lizard" />

Maecenas vel purus nec mauris dignissim pellentesque.';
echo preg_replace('/<img src="[^"]*\/([^"]+" alt="[^"]+") \/>/', '{% img="$1 %}', $content);

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

{% img="frog.jpg" alt="frog" %}

Nunc feugiat lorem tellus, et sollicitudin eros feugiat vitae. Aliquam auctor velit nec auctor semper

{% img="snake.jpg" alt="snake" %}

Donec egestas felis id turpis sollicitudin blandit vitae quis libero. Ut massa arcu, condimentum vitae laoreet auctor, blandit sit amet enim.

{% img="toad.jpg" alt="toad" %}

{% img="lizard.jpg" alt="lizard" %}

Maecenas vel purus nec mauris dignissim pellentesque.