CODEWITHSUNDEEP
javascriptjquerymarkdownwysiwym
tim peterson
tim peterson

Reputation: 24315

Markdown to convert double asterisks to bold text in javascript

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

Upvotes: 12

Views: 16783

Answers (8)

The concise
The concise

Reputation: 452

Choose the perfect regex that will fit your needs. If you don't want styling to span through new line and also using ([^*<\n]+) makes sure at least one character is in between styles or else ** without a character in-between will result will become invisible.

function format_text(text){
return text.replace(/(?:\*)([^*<\n]+)(?:\*)/g, "<strong>$1</strong>")
     .replace(/(?:_)([^_<\n]+)(?:_)/g, "<i>$1</i>")
      .replace(/(?:~)([^~<\n]+)(?:~)/g, "<s>$1</s>")
      .replace(/(?:```)([^```<\n]+)(?:```)/g, "<tt>$1</tt>")
}

•The downside to the above code is that, you can't nest styles i.e *_Bold and italic_*

To allow nested styles use this 👇

format_text(text){
return text.replace(/(?:\*)(?:(?!\s))((?:(?!\*|\n).)+)(?:\*)/g,'<b>$1</b>')
   .replace(/(?:_)(?:(?!\s))((?:(?!\n|_).)+)(?:_)/g,'<i>$1</i>')
   .replace(/(?:~)(?:(?!\s))((?:(?!\n|~).)+)(?:~)/g,'<s>$1</s>')
   .replace(/(?:--)(?:(?!\s))((?:(?!\n|--).)+)(?:--)/g,'<u>$1</u>')
   .replace(/(?:```)(?:(?!\s))((?:(?!\n|```).)+)(?:```)/g,'<tt>$1</tt>');

// extra:
// --For underlined text--
// ```Monospace font```
}

👆 If you want your style to span through new line, then remove \n from the regex. Also if your new line is html break tag, you can replace \n with <br>

Thank me later!

Upvotes: 2

Nicolas Sturm
Nicolas Sturm

Reputation: 691

custom component in react who receives bold like boolean

{(() => {
  const splitText = theText.split('**');
  return (
    <TextByScale>
      {splitText.map((text, i) => (
        <TextByScale bold={!!(i % 2)}>{text}</TextByScale>
      ))}
    </TextByScale>
  );
})()}

Upvotes: 0

Justin
Justin

Reputation: 27331

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>

Upvotes: 23

Mikael Eriksson
Mikael Eriksson

Reputation: 41

None of the provided answers works in all cases. For example, the other solutions wont work if we have a space next to the double star, ie:

This will ** not ** be bold

So I wrote this:

function markuptext(text,identifier,htmltag)
{
    var array = text.split(identifier);
    var previous = "";
    var previous_i;
    for (i = 0; i < array.length; i++) {
        if (i % 2)
        {
            //odd number
        }
        else if (i!=0)
        {
            previous_i = eval(i-1);
            array[previous_i] = "<"+htmltag+">"+previous+"</"+htmltag+">";
        }
        previous = array[i];
    }
    var newtext = "";
    for (i = 0; i < array.length; i++) {
        newtext += array[i];
    }
    return newtext;
}

Just call it like this:

thetext = markuptext(thetext,"**","strong");

and it will work in all cases. Of course, you can also use it with other identifiers/html-tags as you like (the stackoverflow preview should have this too).

Upvotes: 4

tomByrer
tomByrer

Reputation: 1155

Why create from scratch? With so many open source editors out there, you should pick a code base you like & go from there. http://oscargodson.github.com/EpicEditor/ http://markitup.jaysalvat.com/home/

Upvotes: 1

Marty Cortez
Marty Cortez

Reputation: 2343

The following regular expression will find your asterisk-wrapped text:

/\x2a\x2a[A-z0-9]+\x2a\x2a/

I updated your fiddle as an example: http://jsfiddle.net/2LAL4/30/

Upvotes: -1

aroth
aroth

Reputation: 54854

Your regex is broken, for one thing. You probably want something more like:

/\*\*[A-z0-9]+\*\*/gi

The * is a special character in regular expressions. If you want to match against a literal *, then you need to escape it with \.

For instance: http://jsfiddle.net/2LAL4/22/

However, even with this change there's still a fair ways to go before you get to where you really want to be. For instance, your example will not work if the text area contains a mix of bold and non-bold text.

Upvotes: -2

Gustavo Gondim
Gustavo Gondim

Reputation: 1643

If you are using jQuery, replace this:

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

with this:

$("button").click(function () {

Upvotes: -1

Related Questions