Using a $ in a plugin with RegEx

[Lynx]

Okay, I'll try my best to explain what I mean. To give an example, the Custom Post Template plugin allows you to use $[input.value-#] and have it replaced with that value. With that said, I'm wanting to convert one of my codes to a plugin (mostly for practice) and the only way I can see to get something like that is by using RegEx (which still confuses the heck out of me, so please pardon my ignorance here). Here's what I had in mind:

- pb.plugin.get('plugin_id').settings.text_line would equal a text line entered in the UI - which would allow for a replacement variable $[boardname]

In effect, someone could have that text line as: You are posting in the $[boardname] board.

$[boardname] would be set to equal pb.data('page').board.name earlier in the code. Here's my thoughts (this is just a snippet):



var bName = pb.data('page').board.name;
var tLine = pb.plugin.get('plugin_id').settings.text_line;

var fLine = $(tLine).match(/$[boardname]/).replace(bName);


(1) For some reason, that just doesn't look right to me, but not knowing RegEx that well, I don't know.
(2) I do know that RegEx uses a $ - which has a special meaning - so not sure if that would work. I've thought of maybe it would need to be escaped, like so:

var fLine = $(tLine).match(/\$[boardname]/).replace(bName);


but not sure if that's right either. I've looked at other plugins that use RegEx, I've looked in my books, and places like MDN - but they still don't make sense to me on proper use.

What my attempt to "say" in the line above is:

In the variable tLine, if there's a match to $[boardname], replace that with what's in bName and set that to the variable fLine.

My attempt is to get something like: You are posting in the $[boardname] board. to actually display as (for example): You are posting in the Plugin Development board.

Thanks to anyone who can help me with this.

[Quozzo]

You're on the right track but there are several errors in the code. I'll try to explain.

The .match() method compares a string to a RegEx and returns an array. There's more to it than that but it's not what you want to I'll just skip the details.

The .replace() method will literally replace matched text with other text, but that method takes two parameters. This is the one you want to just replace the template with some other text.

RegEx has nothing to do with jQuery so there's no need to select anything using jQuery.

There are some special characters in RegEx which must be escaped if you are literally searching for that character. If you don't then it will assume that character is part of the RegEx and will yield unexpected results. The $ character is one such character, but so are open and close square brackets []. They must be escaped by a backslash to use the literal character.

There are also flags which affect how the RegEx works. Normally when a RegEx finds a match it will stop, unless there is the g flag which tells it to search the string globally. Then there is the i flag which tells it to ignore case (or capital letters) which if omitted will be case specific.

What you're probably looking to do is something like this...

var bName = pb.data('page').board.name;
var tLine = pb.plugin.get('plugin_id').settings.text_line;

var fLine = tLine.replace(/\$\[boardname\]/gi, bName);


I included the i flag just in case someone writes it like $[Boardname]

RegEx is easy to learn but hard to master. The rules are incredibly easy, how you use them is what matters. I use www.regex101.com to test my RegEx's as it's the most versatile and useful to me. It's got a little cheat sheet at the bottom too, just remeber to select JavaScript as the engine or it might cause some unexpected results when using the RegEx in a browser.

Edit: That's weird. The link above is actually two links because the text in it is a link?

I've got extensive knowledge when it comes to RegEx so any questions just let me know.

[Lynx]

Thank you very much for the reply, Quozzo!

Just for practice, I'm working on trying to change the code I did here ( support.proboards.com/post/6915677/thread ) into a plugin, and using a RegEx was the only way I could see how to do that - but as I said, that stuff confuses me.

I wasn't attempting to convey that I was trying to use jQuery, but I see now that this line: var fLine = $(tLine).match(/$[boardname]/).replace(bName); did just that.

So, using a hard-coded example, this:

var text = "You are posting in the $[boardname] board.";

var fLine = text.replace(/\$\[boardname\]/gi, "(board name here)");


would make fLine now equal to: You are posting in the (board name here) board. - correct?

[Quozzo]

That's correct Lynx .

For simple one liners like this you can just hit F12, select "Console" and run it right there. Because the return value is being assigned to a variable then it won't show strait away in the console. You can just type fLine again in the console to see what value has been set to that variable.

[Former Member]

Quick tip

If you are using Chrome, you can actually write your plugin, in the developer tools, without having to keep swapping back and forth between the plugin page.

Writing multi lines in the console is a pain, but there is a feature under the "sources" tab.
Find the double arrow ">>" and choose snippets.

Right click and create new.
From there you can actually write the same code you would inside your plugin component, just hit "run" to live preview the code.

Even "console.log" and "debugger" breakpoints work.

[Chris]

I usually hold the SHIFT key when pressing the ENTER key in the console if I want to create a new line instead of submitting what has already been typed. I recall this also being the case in the Firefox console (the built-in one) but cannot rightly recall if the firebug addon supported this. But generally I prefer to write in an editor that has syntax highlighting so I can easily catch my more common mistakes then copy and paste to test for not so noticeable errors. I realize that most if not all in-browser editors now come with syntax highlighting (firebug had it but it was slow as heck) but by now it's just a matter of old dogs fishing, etc., etc.

[Former Member]

I think the newer versions of Chrome, you don't even have to hold the shift key anymore.
It's smart enough to distinguish between opening/closing braces.

I agree most of the time I prefer an IDE but for anything proboards related, the snippets method is quite handy and really fast for prototyping. Especially since the console is on the next line down and If your anything like me and can never remember the proboards API, having it close by without having to switch back and forth is quite handy.

[callingsilence]

Very helpful, thanks!