RegEx for Selecting an Attribute and its Value

Because I rely a lot on HTML code generators, I often end up in some weird situations where some attribute and value gets thrown into the markup. Here is an example:

<span data-sheets-value="{'1':2,'2':'Get your feet wet working with CSS animations by learning about the animation property, @keyframes rule, and more!'}">Hello!</span>

The data-sheets-value attribute and its JSON value were automatically inserted by Google Sheets when I pasted some content from it into my page. On a typical page, I may end up with hundreds of these, and each attribute instance might have their own unique value. A traditional find/replace won’t work because of the varying content. I have to rely on regular expressions. Sigh.

This particular scenario is one I run into all the time, so I figured I’d share the expression I use to find both the attribute and the value. For the data-sheets-value attribute, the expression is: data-sheets-value="(.[^"]+)" For something like class, the expression will be: class="(.[^"]+)"

Replace data-sheets-value or class with whatever attribute name you are looking out for. This expression will find it and whatever value exists within quotation marks afterwards. It’s a great way to clean-up your HTML if you find yourself with a bunch of attributes and values that you need to bulk replace or just get rid off.