More than 3 years have passed since last update.

【jquery,js】自作マークダウンエディタ、正規表現　[replace,html] [js08_20210226]

Last updated at 2021-02-26Posted at 2021-02-26

処理の概要

入力されたマークダウン形式のテキストを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回以上繰り返しの特殊記号なので。この記事を書いている時も、エスケープしています（笑）
(.+?)は、任意の一文字を示しています。

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