Complex regex to alter img tags

Discussion in 'Javascript' started by bluesrift@aol.com, Mar 23, 2005.

  1. Guest

    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
    , Mar 23, 2005
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > 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.

    [...]


    --
    Rob
    RobG, Mar 23, 2005
    #2
    1. Advertising

  3. JRS: In article <>
    , dated Tue, 22 Mar 2005 20:22:13, seen in news:comp.lang.javascript,
    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).

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk 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?
    Dr John Stockton, Mar 23, 2005
    #3
  4. Guest

    RobG wrote:
    > wrote:
    > > 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.
    >
    > [...]
    >
    >
    > --
    > Rob


    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.
    , Mar 24, 2005
    #4
  5. Guest

    Dr John Stockton wrote:
    > JRS: In article

    <>
    > , dated Tue, 22 Mar 2005 20:22:13, seen in news:comp.lang.javascript,
    > 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).
    >
    > --
    > © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk 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.
    , Mar 24, 2005
    #5
  6. JRS: In article <>
    , dated Wed, 23 Mar 2005 21:32:03, seen in news:comp.lang.javascript,
    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.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
    Dr John Stockton, Mar 24, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. news.austin.rr.com

    how to download img from html img tag

    news.austin.rr.com, Apr 27, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    504
    Steve C. Orr [MVP, MCSD]
    Apr 27, 2005
  2. Philipp Lenssen

    Problem: <img></img>

    Philipp Lenssen, Jun 27, 2005, in forum: XML
    Replies:
    15
    Views:
    746
    David Håsäther
    Jul 3, 2005
  3. Replies:
    1
    Views:
    968
    Brian K. Williams
    Oct 4, 2007
  4. Jopek
    Replies:
    7
    Views:
    391
    dorayme
    Apr 26, 2009
  5. -berlin.de
    Replies:
    0
    Views:
    137
    -berlin.de
    Jun 30, 2007
Loading...

Share This Page