Sublime Text and Sed for a winning combo on HTML tags.

Joshua Otwell
codeburst
Published in
5 min readAug 6, 2018

--

I’m writing this short blog post to share with you a couple of different ways I manipulate multiple HTML tags I need to target for various reasons. Sublime Text is a fantastic editor but there is another editor from yesteryear I’ll cover as well…

Photo by Thom on Unsplash

Suppose I have these 4 paragraph sections enclosed in <p></p> tags.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore modi quis odio, reiciendis, illum a ducimus asperiores iste aliquid unde facilis dicta minus. Cum aperiam repellat cupiditate eum dolore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore modi quis odio, reiciendis, illum a ducimus asperiores iste aliquid unde facilis dicta minus. Cum aperiam repellat cupiditate eum dolore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore modi quis odio, reiciendis, illum a ducimus asperiores iste aliquid unde facilis dicta minus. Cum aperiam repellat cupiditate eum dolore.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore modi quis odio, reiciendis, illum a ducimus asperiores iste aliquid unde facilis dicta minus. Cum aperiam repellat cupiditate eum dolore.</p>

And I need to insert a class attribute value in them. How can I do that? Well, in Sublime Text 3 I can always use the multiple select feature like so:

Multiple Selections With Sublime Text

Then perform the multiple inserts on them all at once, finishing off with something like this:

Multiple text manipulation with Sublime.

While that does work, I have another quick hack I will lean on from time to time in certain instances (I believe it stems from my fondness for all things Unix/Linux).

Particularly if there are numerous tags to select and operate on (more than 4, but here I use just 4 for better browser output and on-screen display), I’ll go with the below option you’re about to see.

I’ll hop over to the Linux command-line terminal and use an old, but powerful ‘master text manipulator’ (in my opinion at least), Sed.

(Self-Service: Hey you should read, Data prepping with Sed for bulk uploads using the PostgreSQL COPY command. I wrote for a more in-depth example use of Sed. You will dig it!!!)

Using just one line of Sed, I can implement the same changes as those I did previously with Sublime:

!!!Warning: The -i command-line flag in the below command will write any changes to the targeted file.(You’ve been warned lol.)

$ sed -i ‘s/<p>/</p><p class=”my-class”>/g’ sed_html_tags.html

While in the terminal, I’ll cat out the results:

$ cat sed_html_tags.html 
<p class=”my-class”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore modi quis odio, reiciendis, illum a ducimus asperiores iste aliquid unde facilis dicta minus. Cum aperiam repellat cupiditate eum dolore.</p>
<p class=”my-class”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore modi quis odio, reiciendis, illum a ducimus asperiores iste aliquid unde facilis dicta minus. Cum aperiam repellat cupiditate eum dolore.</p> <p class=”my-class”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore modi quis odio, reiciendis, illum a ducimus asperiores iste aliquid unde facilis dicta minus. Cum aperiam repellat cupiditate eum dolore.</p><p class=”my-class”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore modi quis odio, reiciendis, illum a ducimus asperiores iste aliquid unde facilis dicta minus. Cum aperiam repellat cupiditate eum dolore.</p>

Please note, the command I issued targets and operates on all the <p></p> tags in the entire document so again, use caution! This may not be what you want.

I hope you find this quick tip handy and useful. I use Sed on a regular basis and always make room for it in my work-flow wherever I can. Thanks for reading.

A PSA for your reading and interest.

All bloggers, check out my gig on Fiverr and allow me to assist you in consistently publishing your blog post.

A Call To Action!

Thank you for taking the time to read this post. I truly hope you discovered something interesting and enlightening. Please share your findings here, with someone else you know who would get the same value out of it as well.

Visit the Portfolio-Projects page to see blog post/technical writing I have completed for clients.

Have I mentioned how much I love a cup of coffee?!?!

To receive email notifications (Never spam) from this blog (“Digital Owl’s Prose”) for the latest blog posts as they are published, please subscribe (of your own volition) by clicking the ‘Click To Subscribe!’ button in the sidebar on the homepage! (Feel free at any time to review the Digital Owl’s Prose Privacy Policy Page for any questions you may have about: email updates, opt-in, opt-out, contact forms, etc…)
Be sure and visit the “Best Of” page for a collection of my best blog posts.

Josh Otwell has a passion to study and grow as a SQL Developer and blogger. Other favorite activities find him with his nose buried in a good book, article, or the Linux command line. Among those, he shares a love of tabletop RPG games, reading fantasy novels, and spending time with his wife and two daughters.

Disclaimer: The examples presented in this post are hypothetical ideas of how to achieve similar types of results. They are not the utmost best solution(s). The majority, if not all, of the examples provided are performed on a personal development/learning workstation-environment and should not be considered production quality or ready. Your particular goals and needs may vary. Use those practices that best benefit your needs and goals. Opinions are my own.

Originally published at joshuaotwell.com on August 6, 2018.

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.

--

--

SQL | PHP | Technical Writing | Photography. Sign-up for my free developer newsletter, OpenLampTech, here: openlamptech.substack.com