Replace markdown characters with regex

Question

I have the following object:

{
    "_id": "59f6f931d20f73000410bbd8",
    "title": "Test",
    "salary": "1337",
    "maxSalary": "4000",
    "minSalary": "1500",
    "introText": "Lorem __Ipsum__ Sit Dolor Amet",
    "expectText": "Lorem Ipsum Sit _Dolor__ Amet Est __Circa__."
}

In my Vue.js app I implemented vue-markdown to render the markdown to display bold and cursive words.

What I now have to implement is, to parse the object for every __word __ and replace it with regex to word .

What I got so far:

let objJson = JSON.stringify(obj);
objJson = objJson.replace(/\_/g, '');
let jobXML = JSON.parse(objJson);
res.send(jobXML);

So this is my workaround to delete the "__" characters but I did not find any other resource which explains how to replace it with my HTML entity.

My workaround is needed because I use /jobs to display all the jobs in my vue app (which can use markdown), but I have also another express route that can not use "__" but needs the HTMl entities.

So ... what you're asking for is a Markdown-to-HTML renderer? — melpomene, Oct 30 '17 at 13:58

score 1 · Accepted Answer · answered Oct 30 '17 at 13:51

1

I think I got a working solution on my own:

let objJson = JSON.stringify(obj);
let regexBold = /\_\_(\S(.*?\S)?)\_\_/gm;
let regexItalic = /\_(\S(.*?\S)?)\_/gm;
objJson = objJson.replace(regexBold, '<strong>$1</strong>');
objJson = objJson.replace(regexItalic, '<i>$1</i>');
let jobXML = JSON.parse(objJson);
res.send(jobXML);

Would be still nice to see other/better approaches for that problem!

answered Oct 30 '17 at 13:51

mrks

5,439
11
52
74

3

Better use `em` instead of `i`. See [What's the difference between and , ** and **?](https://stackoverflow.com/questions/271743/whats-the-difference-between-b-and-strong-i-and-em) – Werner Oct 30 '17 at 14:02

cнŝdk · Answer 2 · 2017-10-30T14:04:54.527

1

This is the regex you need to use in your replace call:

str.replace(/_{1,}([ a-z0-9]+)_{1,}/img, "<strong>$1</strong>")

Demo:

var str = "Lorem Ipsum Sit _Dolor__ Amet Est __Circa__.";

console.log(str.replace(/_{1,}([ a-z0-9]+)_{1,}/img, "<strong>$1</strong>"));

edited Oct 30 '17 at 14:04

answered Oct 30 '17 at 13:59

cнŝdk

31,391
7
56
78

1

Fails on `___foo___`. – melpomene Oct 30 '17 at 14:01
1

AFAIK that should render as both italic and bold. – melpomene Oct 30 '17 at 14:03
For both italic and bold it just need to be: `"$1"`. – cнŝdk Oct 30 '17 at 14:38
`_` is italic, `__` is bold, `___` is both. – melpomene Oct 30 '17 at 14:55

score 1 · Answer 3 · answered Aug 30 '18 at 09:40

1

Probably you can try this one:

str.replace(/__(.*?)__((_+|\W+|$))/g, '<strong>$1</strong>$2')

answered Aug 30 '18 at 09:40

Cheng

84
1
4

score 1 · Answer 4 · answered Nov 22 '21 at 10:39

My ultimate (may have uncovered cases) RegExp for cleaning all markdown inline markings:

/(?<marks>[`]|\*{1,3}|_{1,3}|~{2})(?<inmarks>.*?)\1|\[(?<link_text>.*)\]\(.*\)/g

Sample Markdown line:

Markdown with a `code` *test* with **striping** all _Markdown_ and [Some awesome link 123](http://test.com/a?rt&=123&test=this+open) and more `code` more __fenced 2__ and some ~~strike and more strike~~ !!!

We can replace all markings and link with this replace code:

line.replace(re, '$<inmarks>$<link_text>')

var line = "Markdown with a `code` *test* with **striping** all _Markdown_ and [Some awesome link 123](http://test.com/a?rt&=123&test=this+open) and more `code` more __fenced 2__ and some ~~strike and more strike~~ !!!";

document.querySelector('h3:nth-of-type(1)+pre').textContent = line;


var re = /(?<marks>[`]|\*{1,3}|_{1,3}|~{2})(?<inmarks>.*?)\1|\[(?<link_text>.*)\]\(.*\)/g;

var fixed = line.replace(re, "$<inmarks>$<link_text>");

document.querySelector('h3:nth-of-type(2)+pre').textContent = fixed;

pre { white-space: pre-wrap; }

<h3>Before</h3>
<pre></pre>
<h3>After</h2>
<pre></pre>

And if we want to have the link text with some begin/end character, like a double quote, we can use a function to perform the replacement like this:

line.replace(re, (match, marks, inMarks, linkText) => {
  return linkText && `"${linkText}"` || inMarks || match;
})

var line = "Markdown with a `code` *test* with **striping** all _Markdown_ and [Some awesome link 123](http://test.com/a?rt&=123&test=this+open) and more `code` more __fenced 2__ and some ~~strike and more strike~~ !!!";

document.querySelector('h3:nth-of-type(1)+pre').textContent = line;


var re = /(?<marks>[`]|\*{1,3}|_{1,3}|~{2})(?<inmarks>.*?)\1|\[(?<link_text>.*)\]\(.*\)/g;

var fixed = line.replace(re, (match, marks, inMarks, linkText) => {
  return linkText && `"${linkText}"` || inMarks || match;
});

document.querySelector('h3:nth-of-type(2)+pre').textContent = fixed;

pre { white-space: pre-wrap; }

<h3>Before</h3>
<pre></pre>
<h3>After</h2>
<pre></pre>

Replace markdown characters with regex

4 Answers4