Regular expression for stripping height & width attributes from image scripts

Question

I'm redesigning all my web pages so they'll display in mobile devices (responsive design). Accordingly, I need to strip the width and height attributes out of all my image scripts.

But rather than simply delete the width and height attributes, I'd like to append them AFTER the image script, as in the second example below. It would be much easier working with images if I knew their default size.

<img class="Animals" src="/images/Animals/Horse.jpg" width="300" height="212" alt="Horse">

<img class="Animals" src="/images/Animals/Horse.jpg" alt="Horse"><!--300X212-->

I'm working with PHP and can use either Dreamweaver or TextWrangler for search-and-replace operations.

[This is trickier than you might think](http://stackoverflow.com/a/4234491/471272). — tchrist, Jun 06 '14 at 22:44

coni2k · Answer 1 · 2014-03-25T22:08:26.007

0

I don't know your editors, so can't test it but you could try this pattern;

Find

\swidth="(\d+)"\sheight="(\d+)"( alt="\w+")>

Replace

$3><!--$1x$2-->

And as a side note, if you would like to study regex, you can try this website, has some nice tutorials; http://regexone.com/

edited Mar 25 '14 at 22:08

answered Mar 25 '14 at 22:03

coni2k

2,535
2
20
21

@ Serkan - Thanks, but that doesn't work in either Dreamweaver or TextWrangler. (Maybe I need to get another editor.) – Mar 25 '14 at 22:20
I'm trying it with Notepad++ and Visual Studio, works in both. – coni2k Mar 25 '14 at 22:36
@DavidBlomstrom In TextWrangler, can you try replace part with this; \3> – coni2k Mar 25 '14 at 23:28
Thanks, Serkan, but the problem is the first line - it can't find that pattern. I should have mentioned that I'm using a Mac. I tried to download Notepad++ but discovered that it only works with Windows. ;) – Mar 25 '14 at 23:32
@DavidBlomstrom Well, that would be handy. Unfortunately I'm checking Dreamweaver and TextWrangler's regex options but couldn't pin point the problem. – coni2k Mar 25 '14 at 23:41

score 0 · Answer 2 · answered Mar 25 '14 at 22:06

This should do it in PHP...

<?php
$html = '<img class="Animals" src="/images/Animals/Horse.jpg" width="300" height="212" alt="Horse">';
echo preg_replace('/(<.+) width="(\d+)" height="(\d+)"(.+)/','$1$4<!--$2x$3-->', $html);
?>

Regex is explained by this diagram: regex diagram

Regular expression for stripping height & width attributes from image scripts

2 Answers2