Jun 3, 2016

Regex Love

Here I am editing some HTML in bulk. I want to change the class tag to an ID tag for a bunch of items, as well as changing the id to match the filename for each item (minus the file extension.)

From:

<img src="InviousAnim_assets/FLM_Image_1.png" height="179px" width="102px" class=”wlby_2"></img>
<img src=”InviousAnim_assets/FLM_Image_2.png” height=”55px” width="144px" class="wlby_2"></img>
<img src="InviousAnim_assets/FLM_Image_3.png" height="76px" width="76px" class="wlby_2"></img>
<img src="InviousAnim_assets/FLM_Image_4.png" height="142px" width="123px" class="wlby_2"></img>
<img src=”InviousAnim_assets/FLM_Image_5.png" height="109px" width="109px" class="wlby_2"></img>
<img src="InviousAnim_assets/FLM_Image_6.png" height="73px" width="70px” class="wlby_2"></img>
<img src="InviousAnim_assets/FLM_Image_7.png" height="98px" width="97px" class="wlby_2"></img>
<img src=”InviousAnim_assets/FLM_Image_8.png" height="109px" width="109px" class="wlby_2"></img>
<img src="InviousAnim_assets/FLM_Image_9.png" height="73px” width="70px" class=”wlby_2"></img>

To:

<img src=”InviousAnim_assets/FLM_Image_1.png” height=”179px” width=”102px” id=”FLM_Image_1" wlby_2"></img>
<img src=”InviousAnim_assets/FLM_Image_2.png” height=”55px” width=”144px” id=”FLM_Image_2" wlby_2"></img>
<img src=”InviousAnim_assets/FLM_Image_3.png” height=”76px” width=”76px” id=”FLM_Image_3" wlby_2"></img>
<img src=”InviousAnim_assets/FLM_Image_4.png” height=”142px” width=”123px” id=”FLM_Image_4" wlby_2"></img>
<img src=”InviousAnim_assets/FLM_Image_5.png” height=”109px” width=”109px” id=”FLM_Image_5" wlby_2"></img>
<img src=”InviousAnim_assets/FLM_Image_6.png” height=”73px” width=”70px” id=”FLM_Image_6" wlby_2"></img>
<img src=”InviousAnim_assets/FLM_Image_7.png” height=”98px” width=”97px” id=”FLM_Image_7" wlby_2"></img>
<img src=”InviousAnim_assets/FLM_Image_8.png” height=”109px” width=”109px” id=”FLM_Image_8" wlby_2"></img>
<img src=”InviousAnim_assets/FLM_Image_9.png” height=”73px” width=”70px” id=”FLM_Image_8"></img>

Here’s How:

Unfortunately Medium fucks up the quotes, so use this tool to convert ” to “ (doesn’t show up correctly!) in the above code samples!

Final Regular Expression:

(<img.+?="Inv.+?\/)(.+?)(\.)(.+?)(class=")(.+?)(.+?)(.+?\n)

Final Substitution:

\1\2\3\4\id="\2"/>\n

I used Regex101 and you can see the complete modified Regex here.

This was all done to convert an existing HTML5 animation I had to be compatible with GreenSock javascript animation