Complex regex to alter img tags

[bluesrift]

Using the WYSIWYG contenteditable feature, Internet Explorer will often
add a style to the image tag to define its display size after the image
has been dragged to display at something other than its natural size.
For example:

style="WIDTH: 432px; HEIGHT: 344px"

The values contained within the style are the correct ones resulting
from the drag and override the standard img tag height= and width=
parameters still remaining in the image tag.

I am seeking a regex that will read the values within the added style
portion of the tag, remove the style parameter, and leaving everything
else the same rewrite the tag with assignment of the width and height
values within the style to the standard width= and height= parameters.
For example, change this:

<IMG style="WIDTH: 432px; HEIGHT: 344px" height=442 hspace=10
src='http://theimgurl/filename.jpg"; width=612 align=middle vspace=10
border=0>

to this:

<IMG height=344 hspace=10 src='http://theimgurl/filename.jpg";
width=432 align=middle vspace=10 border=0>

Will that be possible? It seems like it would be a very complex regex
well beyond my skills and possibly my brainpower but I'd be willing to
give it a try if it is technically possible.

The purpose is that under certain circumstances the presence of the
style breaks page layouts in older browsers. I'm not sure, but also if
a browser does not have styles on then the image would appear in the
unintended size, right?

Thanks!

Rob

 

[RobG]

Using the WYSIWYG contenteditable feature, Internet Explorer will often
add a style to the image tag to define its display size after the image
has been dragged to display at something other than its natural size.
For example:

style="WIDTH: 432px; HEIGHT: 344px"

The values contained within the style are the correct ones resulting
from the drag and override the standard img tag height= and width=
parameters still remaining in the image tag.

I am seeking a regex that will read the values within the added style
portion of the tag, remove the style parameter, and leaving everything
else the same rewrite the tag with assignment of the width and height
values within the style to the standard width= and height= parameters.

Then all that is required is to remove the style attributes via
DOM, there is no need for any RegExp.

For example, change this:

<IMG style="WIDTH: 432px; HEIGHT: 344px" height=442 hspace=10
src='http://theimgurl/filename.jpg"; width=612 align=middle vspace=10
border=0>

The following removes the style width & height attributes when
the image is clicked on, you may wish to do it from some other
event but the method is the same:

<IMG style="WIDTH: 432px; HEIGHT: 344px" height="442"
hspace="10" src="http://theimgurl/filename.jpg";
width="612" align="middle" vspace="10" border="0"
onclick="
this.style.height=null;
this.style.width=null;
">

Load the image, it will have the size given by the style
attributes, when clicked on, these are removed and the image
returns to the dimensions set by the image's width & height
attributes.

[...]

 

[Dr John Stockton]

JRS: In article <[email protected]>
, dated Tue, 22 Mar 2005 20:22:13, seen in (e-mail address removed) posted :

I am seeking a regex that will read the values within the added style
portion of the tag, remove the style parameter, and leaving everything
else the same rewrite the tag with assignment of the width and height
values within the style to the standard width= and height= parameters.
For example, change this:

<IMG style="WIDTH: 432px; HEIGHT: 344px" height=442 hspace=10
src='http://theimgurl/filename.jpg"; width=612 align=middle vspace=10
border=0>

to this:

<IMG height=344 hspace=10 src='http://theimgurl/filename.jpg";
width=432 align=middle vspace=10 border=0>

Will that be possible? It seems like it would be a very complex regex
well beyond my skills and possibly my brainpower but I'd be willing to
give it a try if it is technically possible.

You have not said whether your posting agent and/or technique have split
the <IMG ... > over more than one line. If that really is on one line,
then the following MiniTrue command line may be close to what you want
(it will be sent as a single line; how you see it is up to you and your
system) :

mtr -x+ $T.0 - "(<IMG) style=\x22WIDTH: (\d+)px; HEIGHT: (\d+)px\x22(.*height=)\d+(.*width=)\d+" = \1\4\3\5\2

mtr is MiniTrue
-x+ (re-)enables RegExps;
$T.0 is a file containing much of your article
- is a separator
" are delimiters
= is a separator
\x22 stands for "
Pieces that you want to keep are in parentheses
..* means anything
\d+ means a number
\1 \4 \3 \5 \2 are back-references
It is assumed that WIDTH HEIGHT height width are always in that order;
if not, consider two passes.
If the original was on more than one line, I don't have time to deal with
that tonight; but it should not be an insuperable problem (especially if
always similarly split).

 

[bluesrift]

Using the WYSIWYG contenteditable feature, Internet Explorer will often
add a style to the image tag to define its display size after the image
has been dragged to display at something other than its natural size.
For example:

style="WIDTH: 432px; HEIGHT: 344px"

The values contained within the style are the correct ones resulting
from the drag and override the standard img tag height= and width=
parameters still remaining in the image tag.

I am seeking a regex that will read the values within the added style
portion of the tag, remove the style parameter, and leaving everything
else the same rewrite the tag with assignment of the width and height
values within the style to the standard width= and height=

parameters.

Then all that is required is to remove the style attributes via
DOM, there is no need for any RegExp.

For example, change this:

<IMG style="WIDTH: 432px; HEIGHT: 344px" height=442 hspace=10
src='http://theimgurl/filename.jpg"; width=612 align=middle vspace=10
border=0>

The following removes the style width & height attributes when
the image is clicked on, you may wish to do it from some other
event but the method is the same:

<IMG style="WIDTH: 432px; HEIGHT: 344px" height="442"
hspace="10" src="http://theimgurl/filename.jpg";
width="612" align="middle" vspace="10" border="0"
onclick="
this.style.height=null;
this.style.width=null;
">

Load the image, it will have the size given by the style
attributes, when clicked on, these are removed and the image
returns to the dimensions set by the image's width & height
attributes.

[...]

Thank you, I do need the sizes that are stored in the style, but you've
showed me how to get to those. Perhaps I can just capture all the
other expected attributes in the image tag via the DOM then just write
a whole new tag in place of the original. Should be easier than trying
to parse it.

 

[bluesrift]

JRS: In article

, dated Tue, 22 Mar 2005 20:22:13, seen in (e-mail address removed) posted :


You have not said whether your posting agent and/or technique have split
the <IMG ... > over more than one line. If that really is on one line,
then the following MiniTrue command line may be close to what you want
(it will be sent as a single line; how you see it is up to you and your
system) :

mtr -x+ $T.0 - "(<IMG) style=\x22WIDTH: (\d+)px; HEIGHT:

(\d+)px\x22(.*height=)\d+(.*width=)\d+" = \1\4\3\5\2

mtr is MiniTrue
-x+ (re-)enables RegExps;
$T.0 is a file containing much of your article
- is a separator
" are delimiters
= is a separator
\x22 stands for "
Pieces that you want to keep are in parentheses
.* means anything
\d+ means a number
\1 \4 \3 \5 \2 are back-references
It is assumed that WIDTH HEIGHT height width are always in that order;
if not, consider two passes.
If the original was on more than one line, I don't have time to deal with
that tonight; but it should not be an insuperable problem (especially if
always similarly split).

--
© John Stockton, Surrey, UK. [email protected] Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
I find MiniTrue useful for viewing/searching/altering files, at a DOS prompt;
free, DOS/Win/UNIX, <URL:http://www.idiotsdelight.net/minitrue/>

Update hope?

Thank you sir. I'll need to study what are and how to use
backreferences. That seems to be key.

 

[Dr John Stockton]

JRS: In article <[email protected]>
, dated Wed, 23 Mar 2005 21:32:03, seen in (e-mail address removed) posted :

Thank you sir. I'll need to study what are and how to use
backreferences. That seems to be key.

Study also the newsgroup FAQ section 3.2.