77954


下記のようなマークダウンファイルからサムネイルに使う用として、記事の最初20文字くらい取得したいです。

最初の `---~---` で囲われてるのはメタ情報なのでまずここを取り除きます。  
次に `##`に続く改行までの文字列や `index.html`を囲ってるクオーテーション、 `[記事][1]`のようなリンクも取り除きたいです。  
それらを取り除いた文字列20文字くらいを取り出したいです。  
複雑な正規表現になるためどのように書き始めたらよいか分かりません。  
ご教授願いできないでしょうか?  
よろしくお願いします。

[code]

    ---
    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でしか書けない理由
    ...続く
    
[/code]


CC BY-SA 4.0
2021-07-03T06:31:09.330
77934
2021-07-04T05:46:12.717
2021-07-04T05:45:55.427
22565
22565
question
javascript 正規表現
JavaScriptで正規表現を使って余分な記号等を取り除きながら、記事の最初20文字くらいを取得したい。


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

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

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


CC BY-SA 4.0
2021-07-03T07:39:16.093
77936
2021-07-03T12:53:22.997
2021-07-03T12:53:22.997
19110
19110
77934
answer


> 最初の ---~--- で囲われてるのはメタ情報なのでまずここを取り除きます。  
>  次に ##に続く改行までの文字列や index.htmlを囲ってるクオーテーション、 [記事][1]のようなリンクも取り除きたいです。  
>  それらを取り除いた文字列20文字くらいを取り出したいです。

まとめると以下の様な手順になるかと思います。

  1. `---~---` で囲われてるメタ情報を除去
  2. `##` に続く改行までの文字列(heading)を除去
  3. `index.html` を囲ってるクオーテーション(backquotes in inline code)を除去
  4. `[記事][1]` のようなリンク(annotation)を除去
  5. 先頭20文字くらいを取得

この様な順次加工処理には [Array.prototype.reduce()](https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) が適当かと思います。

[code]

    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に直書きする
    
[/code]


CC BY-SA 4.0
2021-07-03T14:20:12.897
77941
2021-07-03T14:20:12.897
47127
77934
answer


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

[code]

    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)
    
[/code]


CC BY-SA 4.0
2021-07-04T05:46:12.717
77954
2021-07-04T05:46:12.717
22565
77934
answer