regexp to find image path file in an image tag

Question

Hi

I'm looking for a regexp that find all images path in an image tag (src) and transform all images path by cid:filename

<img src="../images/text.jpg" alt="test" />

to

<img src="cid:test" alt="test" />

Thanks for your help

Chris

Answer 1

You can go for the PHP DOM to parse your html and do the search replace accordingly.

Otherwise, you can also use the JQuery for that to do the stuff easily:

$(function(){
  $('img').each(function(){
   $(this).attr('src').replace('cid:' + $(this).attr('src'));
  });
});

Answer 2

Any idea with preg_replace ? Thanks for your help - Chris

Answer 3

As Web Logic suggested, I would rather give the PHP DOM Extension a try, especially if you are working with a whole HTML document. You can either pass some HTML fragment to an instance of PHP DOM or the contents of a complete HTML page.

One example of how to do what you suggest if you just have a string of an image element like <img src="../images/text.jpg" alt="test" /> and want to set the src attribute of it to the image-filename without the file extension prefixed by cid:

<?php
$doc = new DOMDocument();
// Load one or more img elements or a whole html document from string
$doc->loadHTML('<img src="../images/text.jpg" alt="test" />'); 

// Find all images in the loaded document
$imageElements = $doc->getElementsByTagName('img'); 
// Temp array for storing the html of the images after its src attribute changed
$imageElementsWithReplacedSrc = array();

// Iterate over the found elements
foreach($imageElements as $imageElement) {
  // Temp var, storing the value of the src attribute
  $imageSrc = $imageElement->getAttribute('src');
  // Temp var, storing the filename with extension
  $filename = basename($imageSrc);
  // Temp var, storing the filename WITHOUT extension
  $filenameWithoutExtension = substr($filename, 0, strrpos($filename, '.')); 
  // Set the new value of the src attribute
  $imageElement->setAttribute('src', 'cid:' . $filenameWithoutExtension);

  // Save the html of the image element in an array
  $imageElementsWithReplacedSrc[] = $doc->saveXML($imageElement);
}

// Dump the contents of the array
print_r($imageElementsWithReplacedSrc);

Prints this result (using PHP 5.2.x on Windows Vista):

Array
(
    [0] => <img src="cid:text" alt="test"/>
)

---

If you want to set the value of the src attribute to the value of the alt attribute prefixed by cid:, look at this:

<?php
$doc = new DOMDocument();
// Load one or more img elements or a whole html document from string
$doc->loadHTML('<img src="../images/text.jpg" alt="test" />');

// Find all images in the loaded document
$imageElements = $doc->getElementsByTagName('img'); 
// Temp array for storing the html of the images after its src attribute changed
$imageElementsWithReplacedSrc = array();

// Iterate over the found elements
foreach($imageElements as $imageElement) {
  // Set the new value of the src attribute
  $imageElement->setAttribute('src', 'cid:' . $imageElement->getAttribute('alt'));

  // Save the html of the image element in an array
  $imageElementsWithReplacedSrc[] = $doc->saveXML($imageElement);
}

// Dump the contents of the array
print_r($imageElementsWithReplacedSrc);

Prints:

Array
(
    [0] => <img src="cid:test" alt="test"/>
)

I hope that gets you started. These are only examples of what to do with the DOM extension, your description of what you need to parse (HTML fragments or complete HTML document) and what you need to output/store were a bit vague.

Answer 4

Thanks @Max, that seems very interesting ;-) I'm going to have a try...

UPDATED

After looking at the source code every looks fine ;-)

Thanks