Markdown to convert double asterisks to bold text in javascript

Question

i'm trying to make my own markdown-able textarea like Stackoverflow has done. The goal is to allow people to type **blah blah** in a textarea and have the output in a div be <span style="font-weight:bold;">blah blah</span>.

I'm having trouble with the javascript to find and replace to the **asterisks with the HTML.

here's a jsfiddle which has gotten the party started: http://jsfiddle.net/trpeters1/2LAL4/14/

here's the JS on that just to show you where I'm at:

$(document.body).on('click', 'button', function() {

var val=$('textarea').val();

var bolded=val.replace(/\**[A-z][0-9]**/gi, '<span style="font-weight:bold;">"'+val+'" </span>');

$('div').html(bolded);
});

and the HTML...

<textarea></textarea>
<div></div><button type="button">Markdownify</button>

any thoughts would be greatly appreciated!

thanks, tim

Answer 1

The other answers fail when a char is immediately before or after the asterisks.

This works like markdown should:

function bold(text){
    var bold = /\*\*(.*?)\*\*/gm;
    var html = text.replace(bold, '<strong>$1</strong>');            
    return html;
}
    
var result = bold('normal**bold**normal **b** n.');
document.getElementById("output").innerHTML = result;

div { color: #aaa; }
strong { color: #000; }

<div id="output"></div>