Extract image names in HTML into an array

Question

I have created some custom TinyMCE plugins which allow users to insert emojis into the HTML.

The emojis are SVG files and exist in different "emoticons" directories with number 1 to 9 at the end of them, depending on which category of emoji is selected.

The file names always start with an "f" but can be different lengths, and some contain no underscores, some contain 1, others contain 2 or more.

When a user submits content, I put it through HtmlPurifier to make sure it's safe.

Then the end result is stored in a database.

I'd like to be able to extract an array of the different file names which are included with each form submission, so that I can keep track of which files are popular.

For example, if the html looks like this:

<img src="https://example.com/assets/includes/tinymce/plugins/emoticons1/img/fe012.svg" alt="fe012" width="80" height="80" /> and something else and then 
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons5/img/f001fg.svg" alt="f001fg" width="63" height="63" /> and we did this 
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons2/img/f001_004.svg" alt="f001_004" width="122" height="122" /> 
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons9/img/f3332.svg" alt="f3332" width="58" height="58" /> maybe something here 
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons3/img/f5553_0001.svg" alt="f5553_0001" width="245" height="245" /> going onto 
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons4/img/f002a_00d2_fee1.svg" alt="f002a_00d2_fee1" width="30" height="30" />  
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons5/img/f3321_a.svg" alt="f3321_a" width="69" height="69" />

Then if I could work out a way to extract a list of file names into an array, I could do something like this:

$files = array("fe012.svg","f001fg.svg", "f001_004.svg", "f3332.svg", "f5553_0001.svg", "f002a_00d2_fee1.svg", "f3321_a.svg");

for($x = 0; $x < count($files); $x++) {
    // update database to say image has been used
}

But this is complicated by the fact that:

The file names are not always the same length
The HTML for the images is mixed in with other bits of text
The files are in different directories

The files have this in common:

The name always starts with "f"
They are all .svg files

Update 1

Thanks for advice so far, I have got this far:

$html = "<img src=\"https://example.com/assets/includes/tinymce/plugins/emoticons1/img/fe012.svg\" alt=\"fe012\" width=\"80\" height=\"80\" /> and something else and then <img src=\"https://example.com/assets/includes/tinymce/plugins/emoticons5/img/f001fg.svg\" alt=\"f001fg\" width=\"63\" height=\"63\" /> and we did this <img src=\"https://example.com/assets/includes/tinymce/plugins/emoticons2/img/f001_004.svg\" alt=\"f001_004\" width=\"122\" height=\"122\" /> <img src=\"https://example.com/assets/includes/tinymce/plugins/emoticons9/img/f3332.svg\" alt=\"f3332\" width=\"58\" height=\"58\" /> maybe something here <img src=\"https://example.com/assets/includes/tinymce/plugins/emoticons3/img/f5553_0001.svg\" alt=\"f5553_0001\" width=\"245\" height=\"245\" /> going onto <img src=\"https://example.com/assets/includes/tinymce/plugins/emoticons4/img/f002a_00d2_fee1.svg\" alt=\"f002a_00d2_fee1\" width=\"30\" height=\"30\" /> <img src=\"https://example.com/assets/includes/tinymce/plugins/emoticons5/img/f3321_a.svg\" alt=\"f3321_a\" width=\"69\" height=\"69\" />";

$dom = new DOMDocument();

$dom->loadHTML($html);

$images = $dom->getElementsByTagName('img');

foreach($images as $img) {

}

Which is almost there - but how would I then access the image name in the foreach loop?

You could use a regular expression. Something like /(f.*\.svg)/? — putvande
– putvande, Commented May 27, 2016 at 14:07
$dom = new DOMDocument(); $dom->loadHTML("html source here"); $images = $dom->getElementsByTagName('img'); foreach($images as $img) { ... } — Niet the Dark Absol
– Niet the Dark Absol, Commented May 27, 2016 at 14:08
@yttonk Post your code using DOMDocument in the question (click the EDIT link below the question), so we can help you with it. — Jocelyn
– Jocelyn, Commented May 27, 2016 at 14:33

Mojtaba · Accepted Answer · 2016-05-27 15:06:39Z

1

You can fetch all the images in the array using DOMDocument Object. Then, get the base filename of src attribute for each image.

Try this:

<?php
$str = <<<EOT
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons1/img/fe012.svg" alt="fe012" width="80" height="80" /> and something else and then 
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons5/img/f001fg.svg" alt="f001fg" width="63" height="63" /> and we did this 
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons2/img/f001_004.svg" alt="f001_004" width="122" height="122" /> 
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons9/img/f3332.svg" alt="f3332" width="58" height="58" /> maybe something here 
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons3/img/f5553_0001.svg" alt="f5553_0001" width="245" height="245" /> going onto 
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons4/img/f002a_00d2_fee1.svg" alt="f002a_00d2_fee1" width="30" height="30" />  
<img src="https://example.com/assets/includes/tinymce/plugins/emoticons5/img/f3321_a.svg" alt="f3321_a" width="69" height="69" />
EOT;

$doc = new DOMDocument();
$doc->loadHTML($str);
$imageTags = $doc->getElementsByTagName('img');
foreach($imageTags as $tag) {
   echo basename($tag->getAttribute('src')) . PHP_EOL;
}

Thanks to Jocelyn because of his recommendation to make it more optimized

edited May 27, 2016 at 15:06

answered May 27, 2016 at 14:42

Mojtaba

5,0275 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

4532066 Over a year ago

Thanks - that gets further, it does display the image name, but above each image name it also says: Notice: Only variables should be passed by reference in C:\xampp\htdocs\b.php on line 13 where line 13 = echo end(explode('/',$tag->getAttribute('src'))) . PHP_EOL;

Mojtaba Over a year ago

@yttonk, I guess you are using PHP v5.4 or higher . I updated the code.

4532066 Over a year ago

Thanks @Mojtaba, that works. If you get a minute to quickly explain that please, that would be helpful, just so I know the logic behind the solution. No problem if you're too busy though, thanks.

Mojtaba Over a year ago

@yttonk. Comments added. Maybe you could upvote as well ;)

Jocelyn Over a year ago

No need to use explode and end here. I suggest using $tmp = basename($tag->getAttribute('src')) instead.

|

Collectives™ on Stack Overflow

Extract image names in HTML into an array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related