Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

RegexBuddy and time saving trick


John W

Recommended Posts

So, I'm helping a friend by updating his old html site to Bootstrap, but the old site had tons of old table code that was very messy.  There's not a lot of pages so I was able to just pull out the text on most files and format it out.  I made a general template that files called and then outputed revelant content.  The real messy one was the gallery set up which was made with an old version of Photoshop.  So, I worked on a pattern to extract what I wanted using RegexBuddy (a tool I love) and with a little bit of work I had perfect output for all the pics I needed to capture and this is how I did it.

 

First a sample of the html code


<TR>
		<TD align="center">	<A href="pages/Acropora_garden6.htm"><IMG src="thumbnails/Acropora_garden6.jpg" border="0" alt=Acropora_garden6></A>	</TD>
		<TD align="center">	<A href="pages/Acropora_garden7.htm"><IMG src="thumbnails/Acropora_garden7.jpg" border="0" alt=Acropora_garden7></A>	</TD>
		<TD align="center">	<A href="pages/blue_maxima_clam.htm"><IMG src="thumbnails/blue_maxima_clam.jpg" border="0" alt=blue_maxima_clam></A>	</TD>
		<TD align="center">	<A href="pages/blue_prostrata.htm"><IMG src="thumbnails/blue_prostrata.jpg" border="0" alt=blue_prostrata></A>	</TD>
		<TD align="center">	<A href="pages/blue_tort.htm"><IMG src="thumbnails/blue_tort.jpg" border="0" alt=blue_tort></A>	</TD>

</TR>

<TR>
		<TD align="center" valign="top">	<A href = "pages/Acropora_garden6.htm"><FONT size="3"  face="Arial" >Acropora_garden6...</FONT></A>
											<FONT size="3"  face="Arial" ></FONT>
		</TD>
		<TD align="center" valign="top">	<A href = "pages/Acropora_garden7.htm"><FONT size="3"  face="Arial" >Acropora_garden7...</FONT></A>
											<FONT size="3"  face="Arial" ></FONT>
		</TD>
		<TD align="center" valign="top">	<A href = "pages/blue_maxima_clam.htm"><FONT size="3"  face="Arial" >blue_maxima_clam...</FONT></A>
											<FONT size="3"  face="Arial" ></FONT>
		</TD>
		<TD align="center" valign="top">	<A href = "pages/blue_prostrata.htm"><FONT size="3"  face="Arial" >blue_prostrata.jpg</FONT></A>
											<FONT size="3"  face="Arial" ></FONT>
		</TD>
		<TD align="center" valign="top">	<A href = "pages/blue_tort.htm"><FONT size="3"  face="Arial" >blue_tort.jpg</FONT></A>
											<FONT size="3"  face="Arial" ></FONT>
		</TD>

</TR>

Using this regex to pull out the pic name and alt

pages/([\w%\-]+).*alt=([\w\s\-]+)

I was able to generate all the lines like this with the bootstrap formating and I just had to tell someone :)  After I cleaned up the alt info to be more presentable.

<div class="col-md-3 col-sm-4 col-xs-6 thumb">
  <a class="thumbnail equal-height" href="gallery/images/ORA_chips_acropora.jpg">
    <img class="img-responsive" src="gallery/thumbnails/ORA_chips_acropora.jpg" alt="ORA_chips_acropora">
      <p class="text-center text-capitalize">ORA_chips_acropora</p>
  </a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
  <a class="thumbnail equal-height" href="gallery/images/ORA_marshall_island_acro.jpg">
    <img class="img-responsive" src="gallery/thumbnails/ORA_marshall_island_acro.jpg" alt="ORA_marshall_island_acro">
      <p class="text-center text-capitalize">ORA_marshall_island_acro</p>
  </a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
  <a class="thumbnail equal-height" href="gallery/images/ORA_pillowtop.jpg">
    <img class="img-responsive" src="gallery/thumbnails/ORA_pillowtop.jpg" alt="ORA_pillowtop">
      <p class="text-center text-capitalize">ORA_pillowtop</p>
  </a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
  <a class="thumbnail equal-height" href="gallery/images/parvona_coral.jpg">
    <img class="img-responsive" src="gallery/thumbnails/parvona_coral.jpg" alt="parvona_coral">
      <p class="text-center text-capitalize">parvona_coral</p>
  </a>
</div>

I'm not really a dog.

Link to comment
Share on other sites

I just realized I forgot to post one of the steps.  After having the regex done, I use the following repacement text using the captured information.  You see the $1 and $2 being inserted into the new html and for each item captured RegexBuddy creates the html I posted a snippet of above.  I can just copy and past the new code.  RegexBuddy is really pretty cool and it can run through folders replacing code changes very quickly.  It also helps build and test regex, which is why I orignally started playing with it.  It can also take a regex you've tested and create php code for it using say, preg_replace.

<div class="col-md-3 col-sm-4 col-xs-6 thumb">
  <a class="thumbnail equal-height" href="gallery/images/$1.jpg">
    <img class="img-responsive" src="gallery/thumbnails/$1.jpg" alt="$2">
      <p class="text-center text-capitalize">$2</p>
  </a>
</div>

I'm not really a dog.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...