Javascript正则表达式将带有WordPress发布内容的字符串拆分为数组（按简码剪切）

Question

If you start with a Javascript string that contains html, text and WordPress shortcodes like this example:

<p>some random<br /> text goes here</p> <p>[foo params=&#8221;blue&#8221;]</p> <p>random text in html</p> <p>[bar params=&#8221;baz&#8221;]this has inner content[/bar]</p> <p>last bit of random text<br /> [foobar]this also has inner content [nestedbox params=&#8221;zoo&#8221;]this nest has inner content[/nestedbox][/foobar]</p> 

Is it possible to have a regex to change the string into the following:

array[
 '<p>some random<br /> text goes here</p><p>',
 '[foo params="blue"]',
 '</p> <p>random text in html</p><p>',
  array[
  '[bar params="baz"]',
  'this has inner content',
  '[/bar]'
 ], 
 '</p> <p>last bit of random text<br />'
 array[ 
  '[foobar]',
  'this also has inner content',
   array[
     '[nestedbox params="zoo"]',
       'this nest has inner content',
     '[/nestedbox ]'
    ], 
  '[/foobar]'
 ]
];

In short, the regex should only split at shortcodes inside the string, and depending on whether the shortcode is a self-closed one ( [foo ...] ) or a open/closed one ( [foobar....]...[/foobar] ) it needs to split recursively as shown above.

After experimenting for a while on https://regex101.com/ , I've only managed to get the various main parts to split (although not quite) with this and I'm a bit stuck:

/(.*?)\[(.*?)\]/g

How can my current regex be tweaked to output the desired array?

Answer 1

To do this solely with regular expressions is not possible, because of the nested array structure you need to get. And even if that were not needed, the JavaScript flavour of regexes do not have the power to match nested pairs of opening and closing tags.

So I would suggest to use a piece of JavaScript code for that. It might need a bit more testing, as I only applied it to your sample data with success:

 function nest(s) { var a = s.match(/\\[\\/?\\w.*?\\]|[^\\[]+/g), i = 0, closed; return (function recurse(endtag) { for (var res = [], v; v = a[i]; i++) { if (v == endtag) { res.push(v); return [res]; // return as nested } else if (v.match(/^\\[\\/\\w.*?\\]$/)) { i--; return res; // return as non-nested } else if (!v.match(/^\\[\\w.*?\\]$/) || !res.length) { // normal text or opening tag at start of // new part res.push(v); } else { // opening tag: recurse res = res.concat(recurse('[/' + v.match(/\\w+/)[0] + ']')); } } return res; })(); } // Sample data var s = '<p>some random<br /> text goes here</p> <p>[foo params=&#8221;blue&#8221;]</p> <p>random text in html</p> <p>[bar params=&#8221;baz&#8221;]this has inner content[/bar]</p> <p>last bit of random text<br /> [foobar]this also has inner content [nestedbox params=&#8221;zoo&#8221;]this nest has inner content[/nestedbox][/foobar]</p>'; // Call the function var a = nest(s); // Show output console.log(a); 

 .as-console-wrapper { max-height: 100% !important; top: 0; }