Cacher is the code snippet organizer for pro developers

Original article explanation is here:

http://www.kirstencassidy.com/cleaning-up-formatting-shortcodes/

\[/vc(.*?)\]

\[vc(.*?)\]

\[custom_font(.*?)\]

\[/custom_font(.*?)\]

\[/vc_column_text(.*?)\]

\[vc_separator(.*?)\]
<hr>

\[/vc_column(.*?)\]

\[vc_row(.*?)\]

\[portfolio_list(.*?)\]

Finding shortcodes in general

(?!\[CDATA\[)\[(.*?)\]

Keeping some elements

(?!\[vc_single_image(.*?)\])(\[vc(.*?)\])

Steps

Step 1

// Remove Visual Composer Stuff Except Images
(?!\[vc_single_image(.*?)\])(\[vc(.*?)\])
\[/vc(.*?)\]

Step 2

// Remove Custom Fonts
\[custom_font(.*?)\]
\[/custom_font(.*?)\]

Step 3

# Change Visual Composer Images To...Actual Images

# Regex ID ONLY - Don't use - just to find IDs
$ (?<=\[vc_single_image image=")([0-9]*)(?=")

# WHOLE SHORTCODE
$ (\[vc_single_image image=")([0-9]*)(?=")(.*\])

# alternative
$ (\[vc_single_image(.*)image=")([0-9]*)(?=")(.*\])

# Replace with 
$ <PanelImage>$2</PanelImage>

Step 4

# Add more XML Elements 

# Find end of Content (use whatever element you like)
$ </Element>

$ </Element>\n\t\t<NewElement>\n\t\t</Panels>

** Other Helpers **

# Replace vc_video link with plain video
$ (\[vc_video link=['|"])([a-zA-Z://.?=_0-9]*)(['|"])(\])

with

$ $2

Why Remove Them In The First Place

http://www.themelab.com/put-shortcodes-in-a-plugin/

When a user changes themes, it can be a pain to go through the site's content and fix any of the shortcodes. Maybe a shortcode was not required in the first place, and this can be changed with regular html - eg a button can simply be changed from:

[button]Foo[/button]

to

<button>Foo</button>

Any styling associated with the theme will correctly be applied to the html.

Maybe it's better to keep the shortcode

For example, if a shortcode is already used site wide, it will be easier to keep the shortcode and retain the functionality.

Therefore extract the shortcode, and place it inside a plugin that can be used regardless of changes in themes at a later date.

An example would be:

[latest_post type="foo" number_of_columns="foo"]

If this is used in multiple places, simply create a plugin. Obviously, it would be better for the plugin to style it, however it's permissible for the theme to style it correctly.

Resources

Regex Helper

https://gist.github.com/gemmadlou/7a0189bfae6c2c7268de12f1de822b8a