simple text formatter as jquery plugin

from about two months I created an account on the biggest questions & answers web site in the world at least in my view, stackoverflow of course any programmer met it in his search. I asked my questions and answered some other questions but the interesting thing was the formatting of questions and answers. They uses Markdown for that purpose.

I am not javascript expert but I tried to build my simple formatter to use it in my work, and with jquery I create my first jquery plugin, MiroDown is the name of it (narcissism I know).

Now I will provide MiroDown code and how to use it in your web page, let's start.

first thing your page should contains <textarea> to write and <div> to preview.

<textarea id="mytext" cols="70" rows="10"></textarea>
<div id="preview"></div>

but before going into more code I want to explore some sample of my formatter

*text*             ==>            text
**text**           ==>            text
`code fragment`    ==>            code fragment
/@@code block@@/   ==>            code block
l@ url @l          ==>            link to url

now let's explore MiroDown jQuery plugin.

in MiroDown  plugin I pass the preview <dev> id to show the formatted text and define an keyup event for my <textarea> to format the text foreach key pressed by the user then show the formatted text in preview <div>

$.fn.MiroDown = function (previewId) {
     this.keyup(function () {
          var result = $(this).val();
          result = result.replace(/<([^<]+?)>/gi, '&lt;$1&gt;');
          result = result.replace(/(&lt;)br\s*(\/)*(&gt;)/gi, '<br />');
          result = result.replace(/\`{1}\s*(\w*|\S*)\s*\`{1}/gi, '<span>$1</span>');
          result = result.replace(/\*{2}(\w+|\S+)\*{2}/gi, '<b>$1</b>');
          result = result.replace(/\*{1}(\w+|\S+)\*{1}/gi, '<i>$1</i>');
          result = result.replace(/\/@@([^@@\/]*)@@\//gi, '<pre>$1</pre>');
          result = result.replace(/l@([^@]*)@l/gi, '<a href="$1">$1</a>');
          result = result.replace(/(\r|\n){2}/gi, '<br />');
          $('#' + previewId).html(result);
    });
};

to add this plugin to your web site you should save the previous code into .js file called jquery.MiroDown.js and add it to your page after adding a reference for jquery.js something like that

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"
type="text/javascript"></script>
<script src="Scripts/jquery.MiroDown.js" type="text/javascript"></script>

last thing is add the styles that will be used in formatted text

<style type="text/css">
        pre
        {
         font-size:12px;
         background-color:#EEE;
        }
        span
        {
          background-color:#E1E1E1;
        }
</style>

to plug MiroDown into your <textarea> after all Dom of your page has been created

<script type="text/javascript">
        $(document).ready(function () {
            $('#mytext').MiroDown('preview');
        });
</script>

I know that is not efficient enough but it just a try to create jquery plugin and use regex in javascript and I will try to enhance MiroDown