CODEWITHSUNDEEP
javascriptwordpressshortcode
oneside
oneside

Reputation: 21

Extract WordPress Shortcode String with Javascript

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!

Upvotes: 1

Views: 3833

Answers (2)

Tim
Tim

Reputation: 1700

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.

Upvotes: 3

brasofilo
brasofilo

Reputation: 26075

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.

Upvotes: 3

Related Questions