txtメモをHTML形式で表示させるには？

初めてこちらを利用させて頂きます、プログラミング未経験な為、至らないところがありましたら申し訳ございません。

前提・実現したいこと

内容としては、PC・スマートフォンにて記入したメモ（プレーンテキストファイル）を、HTML形式で見やすく表示させる形を目指しています。
アプリ専用ソフトは必要とせず、ブラウザのみで機種依存しない閲覧方法を考えているためです。

その際、マークダウン形式に似たような表現で処理できればと考えています。
例えば、文章先頭に「###」と記入してあれば、ヘッダー3として扱われ太字や間隔の装飾をして文章を出力できたら望ましいです。

イメージとしては下図の様な単純な内容です。
![

現状は、テキストファイルを読み込んで表示する、程度まで出来た形です。

HTML5/ JavaScript でテキストファイルを読み込んで表示 - Qiita

こちら様のコードを引用利用しました。

発生している問題

つぎに躓いている部分は、表示される文章をどう改変・装飾すれば良いのかというところです。

装飾判定部分（###等）を元に、ページ内を装飾する。
先頭の装飾判定部分（###等）を自動消去する。

文字列を検索して、条件にあった部分に装飾用classを割り当てる？ような方法をすれば良いのでしょうか。
恐らくJavaScriptを利用するのであろうとは思うのですが、知識が乏しいためご助言頂ければ幸いです。

現状のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>daylog index</title>
6</head>
7<body>
8<pre id="preview" ></pre>
9<input type="file" id="getfile" accept="text/*">
10<script>file = document.querySelector('#getfile');
11
12file.onchange = function (){
13  var fileList = file.files;
14  //読み込み
15  var reader = new FileReader();
16  reader.readAsText(fileList[0]);
17
18  //読み込み後
19  reader.onload = function  () {
20    document.querySelector('#preview').textContent = reader.result;
21  };
22};
23</script>
24</body>
25</html>

HTML5 / JavaScript でテキストファイルを読み込んで表示 - Qiita

こちら様のコードを引用利用しました。

行動規範の内容に同意します

回答2件

ベストアンサー

markedのようなJavaScript向けのMarkdownパーサーがありますので、そういったものを使うのが手っ取り早いかと思います。Markdownそのものをハンドリングできます。

投稿2019/02/05 08:19

maisumakun

総合スコア145553

gfkn94

2019/02/05 09:03

回答ありがとうございます。そのようなものがあるんですね、試してみようと思います。

行動規範の内容に同意します

とりあえず動けばいいなら

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#btn').addEventListener('click',function(e){
4    var v=document.querySelector('#html').value;
5    v=v.replace(/^# (.+?)$/gm,"<h1>$1</h1>");
6    v=v.replace(/^## (.+?)$/gm,"<h2>$1</h2>");
7    v=v.replace(/^### (.+?)$/gm,"<h3>$1</h3>");
8    var v=document.querySelector('#view').innerHTML=v;
9  });
10});
11</script>
12<textarea id="html">
13# hoge
14hogehogehogehoge
15
16## fuga1
17fugafugafugafuga
18
19### piyo1
20piyopiyopiyopiyo
21
22### piyo2
23piyopiyopiyopiyo
24
25## fuga2
26fugafugafugafuga
27
28### piyo3
29piyopiyopiyopiyo
30
31### piyo4
32piyopiyopiyopiyo
33</textarea>
34<input type="button" id="btn" value="変換">
35<hr>
36<div id="view"></div>