Adding live demo to the Guide article.

[lbvf50mobile]

Good day. I want to add a JavaScript interactive demo to the Guide Regex Boundaires article. When I explored regexp folders of this repository I found that examples belongs to the Reference not the Guide.

Question is: do it allowed by rules to add interactive examples to the Guide? And if it's allowed where to put this example?

// Using Regex boundaries to fix buggy string.
buggyMultiline = `zey, ihe light-greon apple
zangs on ihe greon traa`;

// 1) Use ^ to fix the matching at the begining of the sting, and right after newline.
buggyMultiline = buggyMultiline.replace(/^z/gim,'h'); 
console.log(1, buggyMultiline); // fix 'zey', 'zangs' => 'hey', 'hangs'.

// 2) Use $ to fix mathing at the end of the text.
buggyMultiline = buggyMultiline.replace(/aa$/gim,'ee.'); 
console.log(2, buggyMultiline); // fix  'traa' => 'tree'.

// 3) Use \b to match characters right on border between a word and a space.
buggyMultiline = buggyMultiline.replace(/\bi/gim,'t');
console.log(3, buggyMultiline); // fix  'ihe' but does not touch 'light'.

// 4) Use \B to match characters inside borders of an entity.
fixedMultiline = buggyMultiline.replace(/\Bo/gim,'e');
console.log(4, fixedMultiline); // fix  'greon' but does not touch 'on'

Thank you

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

[wbamberg]

This is an interesting suggestion!

Up to now we have only included these examples in reference docs.

There are some issues with including more than one example on a page, I think this only applies to the CSS examples though. And anyway it looks like you are just proposing to include a single example like this at the top of the page, and I can see how an example could be really useful in a page like this. And I think this is a very nicely thought-through example.

I'd like to hear what @Elchi3 thinks, as he's generally responsible for the JS docs. (He's out of office at the moment though.) And maybe @chrisdavidmills also has opinions.

If he agrees, then I think you could put it under https://github.com/mdn/interactive-examples/tree/master/live-examples/js-examples/regexp with the reference examples, and that would be fine.

You could give it a name like "regexp-boundaries" and a title like "JavaScript Demo: RegExp Boundaries". If it's too long to fit in the standard size (and the example you quoted above is) then you should also give it the data-height="taller" attribute (like https://github.com/mdn/interactive-examples/blob/master/live-examples/js-examples/reflect/reflect-deleteproperty.html) and also pass "taller" into the EmbedInteractiveExample call that embeds the example in the Wiki page (like https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty$edit).

I would put it at the top of the page.

[chrisdavidmills]

I'd be happy to at least try this out. I think it would be very useful. Why don't you start work on this with a minimal example, and we'll try it. At the very worst, we can remove it again if it doesn't work for some reason.

[lbvf50mobile]

@wbamberg , @chrisdavidmills thank you for response. I'll take a read contributing document and come back with a pull request.

[chrisdavidmills]

Great, thanks @lbvf50mobile ! We'll look forward to it.

[JavascriptLearner815]

Is the PR here yet?!?