Extract WordPress Shortcode String with Javascript

4 Views

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:

Read More
[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!

Post Views: 4

Related posts

Leave a Reply

2 comments

  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.

  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.