質問: 下記のようなマークダウンファイルからサムネイルに使う用として、記事の最初20文字くらい取得したいです。 最初の `---~---` で囲われてるのはメタ情報なのでまずここを取り除きます。 次に `##`に続く改行までの文字列や `index.html`を囲ってるクオーテーション、 `[記事][1]`のようなリンクも取り除きたいです。 それらを取り除いた文字列20文字くらいを取り出したいです。 複雑な正規表現になるためどのように書き始めたらよいか分かりません。 ご教授願いできないでしょうか? よろしくお願いします。 ``` --- title: "シンプルに生のJavascriptでSVGを外部ファイル化する方法(jQuery, Ajax通信を使用しない)" # 記事のタイトル emoji: "🧠" # アイキャッチとして使われる絵文字(1文字だけ) type: "tech" # tech: 技術記事 / idea: アイデア記事 topics: ["javascript", "svg"] # タグ。["markdown", "rust", "aws"]のように指定する published: true # 公開設定(falseにすると下書き) date: '2020.09.30' --- SVGを`index.html`に直書きするのが嫌でネットで調べたら、PHPかjQueryの`load()`、Javascriptの`XHttpRequest()`しかなかった(ローカル内でget通信するのは気持ち悪い)ので自分なりにベストプラクティスを考えてみた。 ## まえがき 私は新卒2ヶ月で会社を辞めて、今無職である。今日がちょうど無職になってから91日目である。詳しくはideatrendに上げた[記事][1]に書いてある。 そして前職はエンジニアとは関係なく、今は趣味プログラマーで在宅でクラウドワークスでもらったPythonで書かれたシステムのコード解析・エラー改修を継続して行ってる。ほぼボランティアに近い。CS学士ない、文系卒、エンジニア職の未経験の人間が書いている。 なのでこの記事は知見の共有として成り立てばこれほど嬉しい事はないが、こんな方法考えたけど、これってセキュリティ的とかエンジニアとしてはこういった書き方はしないな等、確かめる意味合いが強いので現役のエンジニアからアドバイスが頂けると嬉しい。 ### Javascriptでしか書けない理由 ...続く ```
回答: > > 最初の ---~--- で囲われてるのはメタ情報なのでまずここを取り除きます。 > > 次に ##に続く改行までの文字列や index.htmlを囲ってるクオーテーション、 [記事][1]のようなリンクも取り除きたいです。 > > それらを取り除いた文字列20文字くらいを取り出したいです。 > > > まとめると以下の様な手順になるかと思います。 1. `---~---` で囲われてるメタ情報を除去 2. `##` に続く改行までの文字列(heading)を除去 3. `index.html` を囲ってるクオーテーション(backquotes in inline code)を除去 4. `[記事][1]` のようなリンク(annotation)を除去 5. 先頭20文字くらいを取得 この様な順次加工処理には Array.prototype.reduce() が適当かと思います。 ``` const article = `title: "シンプルに生のJavascriptでSVGを外部ファイル化する方法(jQuery, Ajax通信を使用しない)" # 記事のタイトル : ### Javascriptでしか書けない理由 ...続く `; const regexps = [ [/^\n*---[^]*?\n---\n+/, ''], // delete title [/(?!\n)#+.*?\n\s*/g, ''], // delete headings [/`(.*?)`/g, '$1'], // unquote inline code [/\[(.*?)\]\[.*?\]/g, '$1'], // delete annotation index [/\n+/g, ''], // delete newline [/^(.{0,20}).*/, '$1'], // first upto 20 characters ]; const thumbnail = regexps.reduce((acc, r) => acc.replace(r[0], r[1]), article); console.log(thumbnail); => SVGをindex.htmlに直書きする ```