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

【问题标题】：Extract WordPress Shortcode String with Javascript使用 Javascript 提取 WordPress 短代码字符串
【发布时间】：2016-01-17 02:35:42
【问题描述】：

有谁知道使用 Javascript 或 jQuery 从 WordPress 短代码字符串中提取参数和内容到 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]

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

情况：

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

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

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

感谢您的帮助！

【问题讨论】：

我认为正则表达式不适合。
为什么要使用 JavaScript？你不应该使用 Wordpress Shortcode API 吗？ codex.wordpress.org/Shortcode_API
情况是，我希望用户能够用鼠标在 wordpress 编辑器中选择一个简码。当用户选择此简码并按下“编辑简码”按钮时，我想为此特殊简码打开一个模式对话框并在输入字段中填充简码中的值，以便用户可以编辑它们。这是相反的方式。不从输入字段生成简码，而是使用 javascript 将简码参数重新插入简码生成器输入字段。这就是为什么我需要使用 javascript 而不是 php 函数，因为 php 运行已经完成。
@oneside 你找到解决方案了吗？我想在屏幕上为短代码着色（如代码编辑器），这似乎是我想法的开始。谢谢。

标签： javascript wordpress shortcode

【解决方案1】：

我要做的是在短代码中打印 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。这个getContent 必须用正则表达式解析以提取确切的简码及其属性。对此没有预先制定的解决方案，您必须根据具体情况从头开始构建它。

【讨论】：

当然，我们可以随时尝试parse HTML with RegEx ;)
请再次阅读我在上面的帖子，我添加了一些必要的额外信息。谢谢！
@oneside，我已添加您要查找的信息。
您好，谢谢您的帮助。问题不在于获取所选内容....问题是从所选字符串中获取简码属性，而不是获取字符串本身...我知道对此没有预先制定的解决方案，但是这就是为什么我在这里问。也许有人已经有了解决方案或类似的解决方案？

【解决方案2】：

WordPress 在 wp 对象上有一个名为 shortcode 的新对象。它是用于制作 wp.shortcode Javascript 对象的构造函数。你可以使用它的方法来做各种各样的事情。我认为最好inspect the implementation in WordPress core，它的评论很好，并实现了一些方法。

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

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

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

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

此方法生成一个正则表达式来识别短代码。基本正则表达式在功能上等同于 get_shortcode_regex() 中的那个。

wp.shortcode.regexp( tag )

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

wp.shortcode.attrs( text )

还有更多观点，请参阅核心。

【讨论】：