Using js regex to replace simple markup styles like ** bold ** to <b> bold </b>

Question

I am trying to take a piece of plain text and convert it to html tags. I do not need a full-fledged editor, just these few tags:

**bold** __underline__ ~~italics~~ --strike-- <<http://www.link.com>> 

This is the method I tried to write, but my lack of regex / js seems to hold it back:

 function toMarkup($this) { var text = $this.text(); text = text.replace("\*\*(.*)\*\*", "<b>$1</b>"); text = text.replace("__(.*)__", "<u>$1</u>"); text = text.replace("~~(.*)~~", "<i>$1</i>"); text = text.replace("--(.*)--", "<del>$1</del>"); text = text.replace("<<(.*)>>", "<a href='$1'>Link</a>"); $this.html(text); } 

Any blatant mistakes as to why these replacements don't work? Another problem that I understand now is to convert this text to html. I cannot identify other potential tags that may be malicious. Bonus is any advice on how to avoid these elements and nothing more.

Answer 1

First of all, it's just a string, not regular expressions. Secondly, you should use non-greedy .* .

Alternatively, you can use the g modifier to match every occuvant in the text.

 function toMarkup($this) { var text = $this.text(); text = text.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>"); text = text.replace(/__(.*?)__/g, "<u>$1</u>"); text = text.replace(/~~(.*?)~~/g, "<i>$1</i>"); text = text.replace(/--(.*?)--/g, "<del>$1</del>"); text = text.replace(/<<(.*?)>>/g, "<a href='$1'>Link</a>"); $this.html(text); } 

Answer 2

Use the Regexp object as the first argument to text.replace() instead of the string:

 function toMarkup($this) { var text = $this.text(); text = text.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>"); text = text.replace(/__(.*?)__/g, "<u>$1</u>"); text = text.replace(/~~(.*?)~~/g, "<i>$1</i>"); text = text.replace(/--(.*?)--/g, "<del>$1</del>"); text = text.replace(/<<(.*?)>>/g, "<a href='$1'>Link</a>"); $this.html(text); } 

Please note that I also replaced everything .* With .*? which will match as few characters as possible, otherwise your matches may be too long. For example, you would have to match the first ** to the very last ** instead of stopping at the next. The regulator also needs the g flag so that all matches are replaced (thanks Aaron).

Answer 3

You use the regex syntax in the string literal syntax, not the regular expression literal syntax.

 function toMarkup($this) { var text = $this.text(); text = text.replace(/\*\*(.*)\*\*/g, "<b>$1</b>"); text = text.replace(/__(.*)__/g, "<u>$1</u>"); text = text.replace(/~~(.*)~~/g, "<i>$1</i>"); text = text.replace(/--(.*)--/g, "<del>$1</del>"); text = text.replace(/<<(.*)>>/g, "<a href='$1'>Link</a>"); $this.html(text); } 

If you want to create a regular expression from a string, you will need to use the RegExp constructor, but then you will also need to escape the \ characters to get the backslash in the regular expression.

---

You must also make your own .* Inanimate .... .*? .

Answer 4

  function toMarkup($this) { $this.html ($this.text ().replace (/(__|~~|--|\*\*)(.*?)\1|<<(.*?)>>\/g, function (m, m1, m2, m3) { m[1] = {'**' : 'b>', '__': 'u>', '--': 'del>', '~~': 'i>'}[m[1]]; return m[3] ? '<a href="' + m[3] + '">Link</a>' : ('<' + m[1] + m[2] + '</' + m[1]); }); } 

Please note that you cannot nest them, i.e. if you say __--abc--__ , it will be converted to <u>--abc--</u> __--abc--__ <u>--abc--</u> .