Sublime 3: A Quick Tip Using Find and Replace with Regex

TL;DR

Use (.*?) to match anything in the given context.
Use \1 to replace with the matched value.

e.g.

Find: <use xlink:href="(.*?)”>
Replace: <use xlink:href="\1" href="\1">

The Long Version

Recently I discovered a bug related to how Chrome references external SVGs with the <use> tag. For whatever reason Chrome has an issue that if the SVG file isn't cached it can sometimes not render the referenced SVG. To add to the frustration, the issue seems to be intermittent.

One user on Stack Overflow suggests that because the xlink:href attribute is deprecated that using href solves the problem. So, I figured I'd give a shot, why not, right? The only problem is I use this tag all over my project so manually finding each tag and replacing the value would be a tedious task...especially without knowing if this suggestion would actually fix the issue.

Enter Sublime's find and replace with regex option.

Say I have this tag

<svg><use xlink:href="/icons/symbol-defs.svg#icon-refresh"></use></svg>

and I need to add another attribute, but it must use the same value as the xlink:href attribute.

All I need to do is fire up Sublime's Find and Replace dialogue (Cmd+Shift+F in Mac, Ctrl+Shift+F in Windows/Linux), make sure the Regex icon is toggled on, and enter these values:

Find: <use xlink:href="(.*?)”>
Replace: <use xlink:href="\1" href="\1">

Here's what that looks like in Sublime:

What this does is match anything within the xlink:href attributes double quotes and copies the value to the replaced tag.

So we end up with

<svg><use xlink:href="/icons/symbol-defs.svg#icon-refresh" href="/icons/symbol-defs.svg#icon-refresh"></use></svg>

Too easy, right? That's it, just a quick tip to make your life easier.

Happy coding! 🤓

p.s. In case you were wondering, the fix didn't work, but hey at least I learned something new, right? 😉