正規表現設定方法

例1：長い「…」を省略する

たとえば会議録（自治体のDiscussサイトに表示される会議録）文書内に

出席議員………………………………………………………１

という記述があり、この長い「………………」を省いて一文字分だけ（つまり「…」）にしたい場合、置換用正規表現の欄に

/…{2,}/g, "…"

と記入します。「/…{2,}/g」が文字列を検索する正規表現の部分で、カンマに続く「”…”」が置き換える文字列を示す部分です。なお、置き換え文字列はダブルクオーテーション（”）でくくるルールになっています。

「/…{2,}/g」の「/…{2,}/」は「…が2回以上続けて繰り返されている文字列を探す」という意味があります。「スラッシュ（/）」から始まっていますが、正規表現は必ず2つの「スラッシュ（/）」でくくるというルールがあります。「{2,}」の部分はメタ文字と呼ばれている特殊な記号で、この場合は「直前の文字を2回以上繰り返す」という意味があります。スラッシュの右側についている「g」は、「検索文字列が見つかってもそこで検索をやめず、文書の最後まで探し続ける」という意味です。つまり、たとえば置き換えを行いたい会議録文書が

出席議員………………………………………………………１
欠席議員………………………………………………………１

だった場合、「/…{2,}/g, “…”」を適用することにより、HTMLの出力結果（およびそのHTMLファイルをブラウザで表示したときの表示結果）は以下のようになります。

出席議員…１
欠席議員…１

メタ文字には色々な種類があり、たとえばこちらのサイトにもメタ文字の一覧をご参照ください。

なお「正規表現の検索で文字列が見つかった」ことを「検索がマッチした」と表現することもあります。

例2：議員という文字を太字にする

さて、続いて「議員」という文字を太字にしてみたいと思います。置換用正規表現の欄に、以下のように記載します。

/…{2,}/g, "…"
/(議員)/g, "<strong>$1</strong>"

一行目はそのまま同じです。二行目を見てみます。まず置き換える文字の方ですが「”<strong>$1</strong>”」とあります。この「<strong></strong>」は、HTMLタグの一種で「その間に挟まれている文字列を太字にする」というものです。「$1」は、「正規表現（/(議員)/g）で最初にマッチした文字列」を表し、括弧()内の文字列が入ります。上記の例では、議員の部分を括弧でくくっているため、$1には「議員」という文字が入ります。また「g」は先ほどと同様に「検索がマッチしてもその後も検索を続ける」という意味です。つまり結局「/(議員)/g, “<strong>$1</strong>”」の意味は「議員という文字列を検索し、もし見つかったら、括弧でくくった部分の文字を$1に入れ、<strong>$1</strong>という文字列に置き換える」という意味になります。つまり「議員という文字列が見つかったら、<strong>議員</strong>という文字列に置き換える」ということです。

なお、置換用正規表現の欄に書いたものは、上から順に一行ずつ実行されるルールになっておりますので、オリジナルの会議録

出席議員………………………………………………………１
欠席議員………………………………………………………１

に対してまず「/…{2,}/g, “…”」が適用され、

出席議員…１
欠席議員…１

という結果になります。さらに、この置換されたものに対して、次の「/(議員)/g, “<strong>$1</strong>”」が適用され

出席<strong>議員</strong>…１
欠席<strong>議員</strong>…１

という内容のHTMLファイルが得られます。これをブラウザなどで表示すると

出席議員…１
欠席議員…１

という結果が得られます。

例3: CSSを適用する

次に「出席」の文字と「欠席」の文字を赤くし、さらに下線を引いてみたいと思います。これには二つのやり方があり、まず一つ目の方法として、以下のようにします。

/…{2,}/g, "…"
/(議員)/g, "<strong>$1</strong>"
/(出席)/g, "<span style='font-color:red; text-decoration:underline;'>$1</span>"
/(欠席)/g, "<span style='font-color:blue; text-decoration:underline'>$1</span>"

「出席」という文字列を「<span style=’color:red;text-decoration:underline;’>出席</span>」で置き換え、「欠席」という文字列を「<span style=’color:red;text-decoration:underline;’>欠席</span>」で置き換えます。「<span></span>」もHTMLタグの一種で、文字を修飾する際に使用します。また「style=”」と書くことでHTMLタグにスタイル（見た目）を適用することができます。style=”color:red;”とするとHTMLタグ内の文字を赤くすることができ、style=”text-decoration:underline;”とするとで文字に下線を引くことができます。複数のスタイルを指定する場合は、style=’color:red;text-decoration:underline;’ という風に続けて記載します。

さて、もう一つはより簡単で、お勧めの方法です。

/…{2,}/g, "…"
/(議員)/g, "<strong>$1</strong>"
/(出席)/g, "<span class='sample'>$1</span>"
/(欠席)/g, "<span class='sample'>$1</span>"

という風に、スタイル指定をしたい部分に class=’sample’ と記載します。このsampleはクラス名というもので、自由に名前をつけることができます。続いて、sampleクラスに対応するスタイルをCSS欄に記述します。

.sample {
  color:red;
  text-decoration:underline;
}

このようにドット（.）の後にクラス名を書き、続けて波括弧{}の中にスタイルを記述します。この書き方は非常に分かりやすく、便利なため、お勧めです。

上記二つのどちらの方法でも、出力は以下のようになります。

出席議員…１
欠席議員…１

CSSについてより詳しくは、例えばこちらのサイトをご覧ください。

例4: コメントを入れる

置換用正規表現の欄にはコメントを入れることができます。{}でくくった部分はコメントと見なされ、置換処理の際はその行が無視されます。また、改行だけの行も無視されます。

{…の省略}
/…{2,}/g, "…"

{議員を太字に}
/(議員)/g, "<strong>$1</strong>"

{出席と欠席に、赤字＆下線を引く}
/(出席)/g, "<span class='sample'>$1</span>"
/(欠席)/g, "<span class='sample'>$1</span>"

例5: 自動作成目次ができるようにする

自動作成目次を作成したい場合、HTML内にHeading（見出し）タグ（<h1>, <h2>, <h3>, <h4>, <h5>, <h6>）が含まれるようにする必要があります。たとえば以下のような会議録文章があったとします。

　　令和元年１１月２６日（火）午前９時００分　開会・開議

○日程第１　会期の決定

○議長　日程第１、会期の決定を議題といたします。
お諮りいたします。この定例会の会期は、本日２６日から１２月１９日までの２４日間とすることに御異議ありませんか。
〔「異議なし」と呼ぶ者あり〕

○議長　御異議ありませんので、そのように決定いたしました。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

○日程第２　会議録署名議員の指名

○議長　日程第２、会議録署名議員の指名を行います。
会議録署名議員は、会議規則第１１２条の規定に基づき、～を指名いたします。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

○日程第３　諸報告

～略～

これに対して、以下のような置換正規表現とCSSを適用します。

/^[ 　]+(.+月.+日（.+）[ 　]*)\n/gm, "<h1 class='date'>$1</h1>"
/^○(日程.*[ 　].*)/gm, "<h2 class='nittei'>$1</h2>"

.date {
  color:blue;
}

すると出力されるHTMLファイルの内容は次のようになります。

<h1 class='date'>令和元年１１月２６日（火）午前９時００分　開会・開議</h1>

<h2 class='nittei'>日程第１　会期の決定<h2>

○議長　日程第１、会期の決定を議題といたします。
お諮りいたします。この定例会の会期は、本日２６日から１２月１９日までの２４日間とすることに御異議ありませんか。
〔「異議なし」と呼ぶ者あり〕

○議長　御異議ありませんので、そのように決定いたしました。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

<h2 class='nittei'>日程第２　会議録署名議員の指名<h2>

○議長　日程第２、会議録署名議員の指名を行います。
会議録署名議員は、会議規則第１１２条の規定に基づき、～を指名いたします。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

<h2 class='nittei'>日程第３　諸報告<h2>

～略～

このHTMLファイル内には<h1>タグ、<h2>タグがあるため、自動で目次を作成することができます。正規表現設定の左下にある「自動作成目次を追加」のチェックボックスを入れて、ダウンロードタブからファイルのダウンロードを行うと自動的に目次が作成されたHTMLもしくはPDFファイルが作成されます。

デバッグモード（ログを表示）

CSS欄で使用できるHTMLタグ、CSSスタイル

セキュリティ上の理由から、置換用正規表現欄とCSS欄で使えるHTMLタグ及びCSSのプロパティと値を制限しています。これ以外のタグ等を使用したい場合はお知らせください。現在使えるものは以下の通りです。

[使用可能なHTMLタグ]
a, abbr, b, blockquote, body, br, center, code, div, em, fieldset, font, h1, h2, h3, h4, h5, h6, hr, i, img, label, legend, li, ol, p, pre, small, source, span, strong, style, table, tbody, tr, td, th, thead, ul, u

[使用可能なCSSプロパティ]
background-color, border, border-top, border-right, border-bottom, border-left, border-top-color, border-right-color, border-bottom-color, border-left-color, border-top-width, border-right-width, border-bottom-width, border-left-width, border-top-style, border-right-style, border-bottom-style, border-left-style, border-collapse, color, display, font-size, font-weight, font-family, list-style, list-style-position, list-style-image, list-style-type, margin, margin-top, margin-right, margin-bottom, margin-left, max-width, padding, padding-top, padding-right, padding-bottom, padding-left, text-align, text-decoration, text-decoration-line, text-decoration-style, text-decoration-color, width, height

[使用可能なCSS値]
align, color, class, height, href, src, style, target, title, type, width

（注）CSSで特定のフォントを使うと、PDF内検索ができなくなります

フォントタブで選べる以外の独自フォントをCSSに指定することも可能です（font-family: “フォント名”）。しかし、注意が必要です。Chromeの印刷機能にバグがあり、特定のフォント（「メイリオ」「游ゴシック」「游明朝」など）を使うと、PDFファイルを作成した際に、正常にテキスト検索ができなくなります。独自にフォントを指定する際は、一旦PDF化してから、PDF内で（不具合が起きるのは、具体的にはCJK統合文字の代替フォントが含まれているフォントです。PDF化の際に代替フォントの方が使われてしまい、正常にテキスト検索ができなくなるバグです）。