While working on a new section of the Question-Defense.com web site that will include articles related to Kali Linux I was creating a menu system that would be similar to the Kali Linux menu system. Once the menu was completed with the necessary content and was visually what I was looking for I needed to go back and make some enhancements for SEO (Search Engine Optimization). The goal was to add a HTML title tag where a HTML alt tag already existed and I knew this shouldn’t be to hard to accomplish using regular expressions via TextMate’s find and replace function. Below I describe the issue in more detail along with the regular expression syntax that can be used to accomplish this in the TextMate find and replace window. Please make sure to backup all files you are going to modify before beginning so you can always rollback if need be.
CSS Menu Being Edited Using Textmate on OSX Laptop:
CSS Menu Original Raw Text:
- <li class="menu"><a href="/security/information-security-articles"><span><img src="/images/kali-linux.png" alt="Top 10 Security Tools - Kali Linux"/>Top 10 Security Tools</span></a>
- <ul>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" alt="aircrack-ng - Security Tool"/>aircrack-ng</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" alt="burpsuite - Security Tool"/>burpsuite</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" alt="hydra - Security Tool"/>hydra</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" alt="john - Security Tool"/>john</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" alt="maltego - Security Tool"/>maltego</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" alt="metasploit framework - Security Tool"/>metasploit framework</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" alt="nmap - Security Tool"/>nmap</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" alt="owasp-zap - Security Tool"/>owasp-zap</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" alt="sqlmap - Security Tool"/>sqlmap</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" alt="wireshark - Security Tool"/>wireshark</a></li>
- </ul></li>
As you can see above there is an HTML alt tag associated to each image in the above CSS menu. The goal is use TextMate’s Find & Replace with Regular Expressions to add a HTML title tag that contains the exact text of the alt tag. This will save a ton of time since the actual menu contains close to one thousand instances of images that have existing alt tags but not title tags. Using a regular expression will allow us to accomplish this task in seconds instead of hours as shown below.
First open the file in TextMate and click the Ctrl button and the “f” button at the same time. This will open the TextMate Find window where we can enter the regular expression to find every instance of an alt tag and a second regular expression where we will replace the current instance of each alt tag with itself plus a title tag containing the same contents as the alt tag. Use the text examples below for the Find field and the Replace field to reach the same results.
Regular Expression Text Used To Copy Alt Tag Text To A Title Tag Addition:
- Find Text: alt=(.*)”
- Replace Text: title=$1″ alt=$1″
Example TextMate Find Window with Regular Expressions For Bulk Replace:
Note in the example image above that there is a checkmark in the box next to Regular Expression as without this checked the find function will not even locate any text to replace since it will take the text in the Find field literally. Also note that we are placing the new HTML title tag before the existing HTML alt tag though you can modify the format in any way you prefer. The key is understanding the (.*) regular expression is creating a variable which includes the text after alt= and before the ending quote. If you were going to use the text somewhere that was not part of an HTML tag and simply wanted the alt tag text you could add another quote after the equal sign and the resulting variable would be the text between the two double quote marks only. As noted above make sure you backup the file so you can roll back if need be. I would also suggest clicking Next first so you can verify the text string that is being located before clicking the Replace All button. Once you have verified the proper text is being located you can try replacing a single instance or click the Replace All button to move forward. If for some reason the outcome is not what is expected you can always select Edit from the top navigation menu in TextMate and selecting Undo from the drop down to roll back each edit. The outcome should look similar to the below example CSS menu output and the example image below.
TextMate Find Window After Bulk Replace Using Regular Expression:
To the left of the Regular Expression checkbox you can see how many instances of the text was found and replaced which in this case is 11 instances replaced. The updated CSS menu will look similar to the below example image and text outputs.
Updated CSS Menu with Image Title Tags Edited Using Textmate:
CSS Menu Updated Text:
- <li class="menu"><a href="/security/information-security-articles"><span><img src="/images/kali-linux.png" title="Top 10 Security Tools - Kali Linux" alt="Top 10 Security Tools - Kali Linux"/>Top 10 Security Tools</span></a>
- <ul>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" title="aircrack-ng - Security Tool" alt="aircrack-ng - Security Tool"/>aircrack-ng</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" title="burpsuite - Security Tool" alt="burpsuite - Security Tool"/>burpsuite</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" title="hydra - Security Tool" alt="hydra - Security Tool"/>hydra</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" title="john - Security Tool" alt="john - Security Tool"/>john</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" title="maltego - Security Tool" alt="maltego - Security Tool"/>maltego</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" title="metasploit framework - Security Tool" alt="metasploit framework - Security Tool"/>metasploit framework</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" title="nmap - Security Tool" alt="nmap - Security Tool"/>nmap</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" title="owasp-zap - Security Tool" alt="owasp-zap - Security Tool"/>owasp-zap</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" title="sqlmap - Security Tool" alt="sqlmap - Security Tool"/>sqlmap</a></li>
- <li><a href="/security/information-security-articles"><img src="/images/kali-linux.png" title="wireshark - Security Tool" alt="wireshark - Security Tool"/>wireshark</a></li>
- </ul></li>
As you can see above there is now a title tag that contains the same text as the alt tag. Obviously the time savings with eleven items is not huge however when needing to make the change to hundreds or thousands of items you can save a bunch of time.
