1

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!

oneside
  • 21
  • 1
  • 4
  • I don't think a regular expression would be appropriate for that. – Qantas 94 Heavy Oct 26 '13 at 09:20
  • Why you want using JavaScript? Should you not use Wordpress Shortcode API? http://codex.wordpress.org/Shortcode_API – itsazzad Oct 26 '13 at 09:24
  • The situation is, that i want users be able to select a shortcode in the wordpress editor with the mouse. when the user selects this shortcode and presses a button "edit shortcode", i want to open a modal-dialog for this special shortcode and fill the values from the shortcode in input fields, so the user can edit them. This is the reverse way. Not generate shortcode from input fields, but reinsert shortcode parameters into shortcode generator input fields with javascript. Thats why i need to use javascript and not the php functions, because php running is allready done. – oneside Oct 26 '13 at 10:43
  • @oneside Did you find the solution to this? I want to colorize a shortcode on screen (like a code editor) and this seems the start of my idea. Thanks. – sergio May 15 '14 at 04:28

2 Answers2

3

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.

Community
  • 1
  • 1
brasofilo
  • 25,496
  • 15
  • 91
  • 179
  • Of course, we can always try to [parse HTML with RegEx](http://stackoverflow.com/a/1732454/1287812) ;) – brasofilo Oct 26 '13 at 10:46
  • Please read my post on top again, i added some necessary extra information. Thx! – oneside Oct 26 '13 at 10:57
  • @oneside, I've added the info you're looking for. – brasofilo Nov 03 '13 at 11:11
  • Hi, thx for your help. The problem wasn`t to get the selected content.... the problem was to get the shortcode attributes from the selected string, not to get the string itself... I know that there is no pre-made solution for this, but thats why iam asking here. maybe someone allready has a solution for this or for something similar? – oneside Nov 04 '13 at 12:27
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.

Tim
  • 1,680
  • 2
  • 15
  • 21