処理の概要

入力されたマークダウン形式のテキストをhtmlに変換。これをhtmlタグコードと、htmlで表示する

処理のフロー：

　(1)マークダウン形式のテキストを取得
　(2)関数にて置換
　(3)htmlタグ形式でテキストエリアに出力
　(4)htmlにて表示

画面イメージ

画像１

画像２

ソースコード

index.html

<head>
<link rel="stylesheet" href="./css/default.css">
</head>
<body>
<textarea id="userText">
# タイトル1
本文本文本文本文*本文*本文

## タイトル2
本文本文本文本文*本文*本文
</textarea><br>
<input type="button" id="execButton" value="実行"><br>
<textarea id="output"></textarea><br>
<div id="output2"></div>
</body>

main.js

// DOMの準備後に実行する内容
$(function() {
    $("#execButton").click(function(){
        var markDownText = $("#userText").val();
        htmlText = markDown(markDownText);

        $("#output").val(htmlText);
        $("#output2").html(htmlText);

        function markDown(argText){
            argText = argText.replace(/\*(.+?)\*/g, "<b>$1</b>");
            argText = argText.replace(/^## *(.+?)$/gm, "<h2>$1</h2>");
            argText = argText.replace(/^# *(.+?)$/gm, "<h1>$1</h1>");
            argText = argText.replace(/\n/gm, "<br>\n");

            return argText;
        }
    });
});

default.css

textarea {
	height: 8em;
	width: 40em;
}

.input-style {
	color:blue;
	width: 400px;
}

b {color: red;}

ポイント

html：
(1)なし
js：
(1)正規表現について
①*〜*で挟まれた部分を、/\*(.+?)\*/gで表現します。replaceなので、ステークホルダーを使い、<b>$1</b>で置換します。
\は*(アスタリスク)をエスケープしています。下の参考資料の通り、*は0回以上繰り返しの特殊記号なので。この記事を書いている時も、エスケープしています（笑）
(.+?)は、任意の一文字を示しています。

②行頭は^。行末は$です

参考資料

JavaScript(仕事の現場でサッと使える！デザイン教科書)　p150
正規表現はこちら↓
JavaScript(仕事の現場でサッと使える！デザイン教科書)　p91

正規表現-参考資料1

正規表現-参考資料2

正規表現-参考資料3