Regex replace with multiple wildcards works in PHP, not in JavaScript

Question

I'm attempting to implement center alignment for two Markdown parsers:

1. In PHP for Parsedown (successfully)
2. In JavaScript for Bootstrap Markdown (without success)

The idea I'm following and finding the easiest is to work with the final HTML output, and just snap inline styling onto the tags.

The following regex does what I need, it adds style="text-align:center;" to any element so far*, as needed:

$text = preg_replace('/\<(.*?)\>\-&gt;(.*?)&lt;\-\<\/(.*?)\>/', '<$1 style="text-align:center;">$2</$3>', $text);

That is, <p>text</p> becomes <p style="text-align:center;">text</p> .

However, when I attempted to port this into JavaScript to also make it available for previewing on client-side, the pattern does not match as it should:

content = content.replace('/\<(.*?)\>\-&gt;(.*?)&lt;\-\<\/(.*?)\>/', '<$1 style="text-align:center;">$2</$3>');

The replacement in content does not occur.

I'm aware there are slight differences between Regex of PHP and JavaScript, but I have found examples for all the expected behavior here on both sides, working.

---

*If someone is wondering by any chance, I'm also successfully adding the center alignment to tags that already have a style attribute - on server side only, so far.

Answer 1

You'll need to use the literal syntax for regular expression in JavaScript, like so:

content = content.replace(/\<(.*?)\>\-&gt;(.+)&lt;\-\<\/(.+)\>/gi, '<$1 style="text-align:center;">$2</$3>');

Note that the gi at the end of the regular expression simply enables global searching (that is, replace all occurrences matching the pattern) and case-insensitive matching. They are both technically optional, but you will most likely want the g flag enabled for certain. However, keeping the i flag is up to you (depends on whether or not your content contains > , for example).