Extract WordPress Shortcode String with Javascript

Question

does anyone know a method to extract the parameters and content from WordPress Shortcode Strings with Javascript or jQuery into an Javascript array or variables?

Shortcodes like this:

[button url="http://...." color="#00000"]Contact me![/button]

or like this:

[tabs]

  [tab title="Title 1"]Content Tab 1[/tab]

  [tab title="Title 2"]Content Tab 2[/tab]

[/tabs]

I tried to find a library or some working regex, but i couldn`t find some.

Situation:

I allready developed a shortcode generator, which generates shortcodes from values users has insert in input fields. Now i want the oposit way:

A user selects a shortcode in the editor and presses a button "edit with generator" and then the javascript gets the parameters from the shortcode. After that it opens the dialog from this shortcode using jquery-ui. Then it should fill the values into the matching fields into dialog, so that the user can edit them easily.

I think a matching javascript version of the wordpress function shortcode_atts() would do the job?!

Thx for your help!

Answer 1

What I'd do is printing JS variables within the Shortcode:

add_shortcode( 'buttons', 'js_vars_so_19604963' );

function js_vars_so_19604963( $atts, $content = null, $shortcode ) 
{
    $output = 'Normal shorcode work here';

    $output .= '<script type="text/javascript">
        var sc_button_color = "' . $atts['color']. '";
        </script>';

    return $output;
}

Then, access them in JavaScript: console.log(sc_button_color) .

---

A user selects a shortcode in the editor and presses a button "edit with generator" and then the javascript gets the parameters from the shortcode.

To know what the user selected in the content box we need tinyMCE.activeEditor.selection.getContent . This getContent has to be parsed with RegEx to extract the exact Shortcode and its attributes. There's no pre-made solution for this and you'll have to build it from scratch, case by case.

Answer 2

WordPress has a an new object on the wp object called shortcode . It is a constructor function for making wp.shortcode Javascript objects. You can use it's methods to do all kinds of things. I think it's best to inspect the implementation in WordPress core , it's well commented and has some methods implemented.

This method allows you to process shortcodes in a string replacing them through use of a callback function.

wp.shortcode.replace( tag, text, callback )

This method is useful when you need to grab shortcodes out of a string for processing elsewhere and keep a reference to them.

wp.shortcode.next( tag, text, index )

This method generates a RegExp to identify a shortcode. The base regex is functionally equivalent to the one found in get_shortcode_regex() .

wp.shortcode.regexp( tag )

This methods let's you parse shortcode attributes from text.

wp.shortcode.attrs( text )

There are a view more, see core for that.