使用Javascript提取WordPress短代码字符串

Question

有没有人知道一种方法从WordPress短代码字符串中提取参数和内容用Javascript或jQuery到Javascript数组或变量？

像这样的短代码：

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

或者像这样：

[tabs]

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

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

[/tabs]

我试图找到一个库或一些正在运行的正则表达式，但我找不到一些。

情况：

我已经开发了一个短代码生成器，它根据用户在输入字段中插入的值生成短代码。 现在我想要oposit方式：

用户在编辑器中选择短代码并按下“使用生成器编辑”按钮，然后javascript从短代码中获取参数。 之后，它使用jquery-ui从这个短代码打开对话框。 然后它应该将值填充到匹配的字段到对话框中，以便用户可以轻松地编辑它们。

我认为wordpress函数shortcode_atts（）的匹配javascript版本可以完成这项工作吗？！

谢谢你的帮助！

Answer 1

我要做的是在Shortcode中打印JS变量：

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;
}

然后，在JavaScript中访问它们： console.log(sc_button_color) 。

---

用户在编辑器中选择短代码并按下“使用生成器编辑”按钮，然后javascript从短代码中获取参数。

要知道用户在内容框中选择了什么，我们需要tinyMCE.activeEditor.selection.getContent 。 必须使用RegEx解析此getContent以提取确切的Shortcode及其属性。 没有预先制定的解决方案，你必须从头开始逐个构建它。

Answer 2

WordPress在wp对象上有一个名为shortcode的新对象。 它是用于制作wp.shortcode Javascript对象的构造函数。 你可以用它的方法来做各种事情。 我认为最好检查一下WordPress核心中的实现 ，它的评论很好并且实现了一些方法。

此方法允许您处理字符串中的短代码，通过使用回调函数替换它们。

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

当您需要从字符串中获取短代码以便在其他地方处理并保留对它们的引用时，此方法很有用。

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

此方法生成RegExp以标识短代码。 基本正则表达式在功能上等同于get_shortcode_regex()正则表达式。

wp.shortcode.regexp( tag )

这个方法让你解析文本中的短代码属性。

wp.shortcode.attrs( text )

有更多的观点，请看核心。