0

I have a function for replacing a shortcode with a bulletpoint (Unordered list)

Shortcode looks like this:

[bullet:This is my bullet]

And becomes this

<ul><li>This is my bullet</li></ul>

When it's been processed by this

function replaceBulletTag(text) {
    if (~text.indexOf('[bullet:')) {
        var value = text.split('[bullet:')[1].split(']')[0];
        text = text.replace(/\[bullet:(.+?)\]/g, '<ul><li>'+value+'</li></ul>');
    }

    return text;
}

This works wonders.

My question is; How do I use a variable in my regex?

I want to replace a button shortcode with an html button. I need this to be a variable, because the button changes based on some other code.

var text = 'Are you happy? Then press the button [yes-button:Yes, I am happy]';
var button = '[yes-button:';
var value = text.split(button)[1].split(']')[0]; //Yes, I am happy

But if i use the same regex as in my replaceBulletTag function, it doesn't work.

text = text.replace(/\button(.+?)\]/g, '<button>'+value+'</button>');

I've also tried

text = text.replace('/\'+button+'(.+?)\]/g', '<button>'+value+'</button>');

It should become

Are you happy? Then press the button <button>Yes, I am happy</button>

EDIT

I have also tried 

var regex = new RegExp(${button}(.+?)],'g');
text = text.replace(regex, '<button>'+value+'</button>');
Nissen
  • 287
  • 3
  • 17
  • What is this string `'m happy]'` ? I mean everything before it... – Roko C. Buljan Feb 20 '20 at 09:59
  • `new RegExp(\`${button}(.+?)\]\`,"g")` use template literals and RegExp constructor. And replace with first group `` – Ritesh Khandekar Feb 20 '20 at 10:00
  • Use a `RegExp` constructor when you need to build a pattern with variables – Wiktor Stribiżew Feb 20 '20 at 10:00
  • Just out of curiosity, how to you add multiple bullets inside the same UL? – Roko C. Buljan Feb 20 '20 at 10:00
  • I can't, it just makes multiple UL :) – Nissen Feb 20 '20 at 10:02
  • Would be cool to have: `orderedList:` and `unorderedList:` like i.e: `[unorderedList:This is my bullet|This is my second one|Third one \| escapes a pipe]` and you just split the unescaped `|` to get all the bullets :D – Roko C. Buljan Feb 20 '20 at 10:04
  • var text = 'Are you happy? Then press the button [yes-button:Yes, I'm happy]'; should be var text = "Are you happy? Then press the button [yes-button:Yes, I'm happy]"; I've edited the question – Nissen Feb 20 '20 at 10:06
  • It is still a dupe of [How do you use a variable in a regular expression?](https://stackoverflow.com/questions/494035/how-do-you-use-a-variable-in-a-regular-expression) – Wiktor Stribiżew Feb 20 '20 at 10:07
  • The answer from that thread doesn't work for me – Nissen Feb 20 '20 at 10:08
  • Then update the question. I can't see anywhere in the question that you tried `RegExp` constructor notation. Explain what you did and what's going on wrong. – Wiktor Stribiżew Feb 20 '20 at 10:08
  • The first argument to `RegExp` is a **string literal**. You passed an *identifier*. **Use a string literal**. Also, if the text you pass is a fixed text, not a regex, **escape** it, as is [shown in the answer](https://stackoverflow.com/a/25837411/3832970). – Wiktor Stribiżew Feb 20 '20 at 10:24

0 Answers0