-1

下記のようなマークダウンファイルからサムネイルに使う用として、記事の最初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でしか書けない理由
...続く
3
  • 2
    いっぺんにやる必要性はありますか? 自分でわかっているとおりに、いくつかのステップに分けて、適宜加工すればよいのでは? Commented 2021年7月3日 6:44
  • 純粋な Markdown ではなく、何らかのブログエンジンで使用されている保存形式に見えます (例えば Movable Type とか)。それらの情報が分かれば、まずは本文の部分だけをパースする方法などがありそうな気がします。
    – cubick
    Commented 2021年7月3日 6:52
  • コメントの通りに分割しながら書く事で出来ました。ありがとうございます。 はいブログエンジンで使用しています。
    – wataru
    Commented 2021年7月3日 15:31

3 件の回答 3

3

正規表現を使わないことをお勧めします。与えられる Markdown に特に制約が無い場合、その内容を正規表現だけでパースするのは困難です。たとえばリンク記法 [title](url) を取り除きたいということですが、同じ文字列がインラインコードの中にある場合はおそらく取り除きたくないでしょう。こういった細かい問題に個別に対処していくのに、正規表現だと長大になりすぎますし、メンテナンス性も落ちてしまいます。

その代わりに、専用のパーサーを使うことをお勧めします。おそらくこの Markdown ファイルは先頭の内容の部分だけが使われるのではなく、全体としても何らかのシステムを使って整形され、何かしらのページになるのでしょう。もしそうであれば、このファイルをパースするためのライブラリやフレームワークをお使いのはずです。そこで使われているパーサーをそのまま使えないでしょうか? たとえば GitHub Pages で使える Jekyll という静的サイトジェネレーターでは strip_html などのフィルター関数を使うことでこの問題を解決できます。

また、そこまで厳密にやらなくても良くて、単に見栄えがそれっぽくなれば良いというだけであれば、ファイルの内容を ^---$ が 2 回現れた後から数行取ってきて、`~[]()# あたりの記号を雑に削除し、先頭から 20 文字取ってくる、というのでも良さそうです。

0

最初の ---~--- で囲われてるのはメタ情報なのでまずここを取り除きます。
次に ##に続く改行までの文字列や 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に直書きする
0

こんな感じにコードを書く事で目的の正規表現を書くことができました。

const text = '---\ntitle: "シンプルに生のJavascriptでSVGを外部ファイル化する方法(jQuery, Ajax通信を使用しない)" # 記事のタイトル\nemoji: "🧠" # アイキャッチとして使われる絵文字(1文字だけ)\ntype: "tech" # tech: 技術記事 / idea: アイデア記事\ntopics: ["javascript", "svg"] # タグ。["markdown", "rust", "aws"]のように指定する\npublished: true # 公開設定(falseにすると下書き)\ndate: "2020.09.30"\n---\nSVGを`index.html`に直書きするのが嫌でネットで調べたら、PHPかjQueryの`load()`、Javascriptの`XHttpRequest()`しかなかった(ローカル内でget通信するのは気持ち悪い)ので自分なりにベストプラクティスを考えてみた。\n\n## まえがき\n私は新卒2ヶ月で会社を辞めて、今無職である。今日がちょうど無職になってから91日目である。詳しくはideatrendに上げた[記事][1]に書いてある。\nそして前職はエンジニアとは関係なく、>今は趣味プログラマーで在宅でクラウドワークスでもらったPythonで書かれたシステムのコード解析・エラー改修を継続して行ってる。ほぼボランティアに近い。CS学士ない、文系卒、エンジニア職の未経験の人間が書いている。\n\nなのでこの記事は知見の共有として成り立てばこれほど嬉しい事はないが、こんな方法考えたけど、これってセキュリティ的とかエンジニアとしてはこういった書き方はしないな等、確かめる意味合いが強いので現役のエンジニアからアドバイスが頂けると嬉しい。\n\n### Javascriptでしか書けない理由';

const metadate = text.match(/^---[\s\S]*---/)
//console.log(metadate)
const lastNumber = text.lastIndexOf(metadate[0])
const removedMeta = text.slice(metadate.index + metadate[0].length, text.length)
const text140 = removedMeta.slice(0, 140)
const removedSymbol = text140.replace(/\`|\[記事\]\[[0-9]\]|\n#+[\s\S]*?\n|#+[\s\S]*|\n|-|>/g, '')
console.log(removedSymbol)

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。