Regular Expression replacer (and its inverse) / 正規表現置換器 in Javascript

コード例は実に単純な方法ですが、Unicode を扱う Javascript のような言語では、左欄に関して、このような変換のための仕組みは備わっています。以下のようにします。

v.normalize('NFKC')

これは Unicode 文字列の合字などを正規化する命令の一つです。対象となる合字などは数えきれないほどあり、意図しない変換が生じることが予想されます。よって、場面によっては以下の方が適切かもしれません。

v.replace(/㈱|㈲|㈹/g, v=>v.normalize('NFKC'))

しかし、この Unicode 正規化には当然のことながら逆変換は存在しません。それに、需要に応じた局所的な約束事を決めた上で「(株)」→「㈱」などの変換は行うことになるでしょう。

まずは、右欄の逆変換において、コード例の正規表現「(.*?)」を初めは

(.*)

としてしまいがちです。この間違いを試してみると、意図せず２個以上の ruby タグまでマッチしてしまいます。正規表現は基本は「貪欲マッチ」なので「非貪欲マッチ」なるコード例 (.*?) が正解となります。しかし、この「貪欲」という用語は不十分ですので説明を続けます。

一方で、左欄の変換において、コード例の正規表現「␣([^␣]*)」を初めは

␣(.*)

としてしまいがちです。この間違いを試してみると、やはり、ルビの対象範囲が意図せず左端からマッチしてしまいます。そこで、「非貪欲マッチ」なる

␣(.*?)

に直してみましょう。これでもルビの対象範囲が意図せず左端からマッチしてしまう箇所が残っています。

正規表現の「貪欲マッチ」は正確には「最左最大マッチ」であると覚えておいてください。よって、まだこの「最左最小マッチ」の最左が意図せずルビの対象範囲を広げてしまっているので、この場合、文字集合を狭めてしまうのが適切で、ゆえに ␣([^␣]*) が正解となります。

ちなみに、「最右最大マッチ」「最右最小マッチ」というのは聞いたことはありませんが「絶対最大マッチ」は他の言語 Perl などにはあります。また、「貪欲」に並んで「強欲」という用語も一般に使われているようですが、誤りではないにせよ、いずれも正規表現の基本「最左最大マッチ」の一面のみを表す用語となります。

ruby > rp タグに対応した版がこちらにあります。

コード例では 16 進法は二桁ずつの RGB 値と決めうちしてしまっているので、実用的には不十分です。RGB 値には一桁ずつもあり得ます。つまり、原色分解能 256 の #FFFFFF だけでなく原色分解能 16 の #FFF でもよいわけです。

そこで、右欄では原色分解能 16 への対応、左欄でも（すべきか否かは別として）原色分解能 16 への対応を実現してみます。以下のようなコード例となります。

rgb(r,g,b) ⇒ #FFF, #FFFFFF

v.replace(/rgb\(([\d,]*)\)/g, (m,p)=>'#' + p.split(/\s*,\s*/).map(v=>parseInt(v).toString(16).padStart(2, '0')).join('').replace(/^(.)\1(.)\2(.)\3$/, '$1$2$3'))

⬁ Code

#FFF, #FFFFFF ⇒ rgb(r,g,b)

v.replace(/#([0-9A-F]{6}|[0-9A-F]{3})/ig, (m,p)=>'rgb(' + (p.length == 6 ? [ p.slice(0,2), p.slice(2,4), p.slice(4,6) ] : [ p.slice(0,1).repeat(2), p.slice(1,2).repeat(2), p.slice(2,3).repeat(2) ]).map(v=>parseInt(v, 16)).join(',') + ')')

⬀ Code

ここで、replace(/^(.)\1(.)\2(.)\3$/, '$1$2$3') は特に重要で、置換先の $1 等もキャプチャグループの参照ですが、置換元の正規表現のなかの 「\1」等もキャプチャグループの後方参照です。

左欄のコード例では 'm' フラグを使っていないので、実は少し冗長です。この複数行フラグ multiline プロパティを使用すると以下のように .replace(/\n/g, '</td></tr>\n<tr><td>') が不要になります。

'<table><tbody>\n' + v.replace(/\n*$/, '').replace(/\t/g, '</td><td>').replace(/^/mg, '<tr><td>').replace(/$/mg, '</td></tr>') + '\n</tbody></table>'

ちなみに、いずれの例でも最初に replace(/\n*$/, '') していますが、最終行に空行はないものとして処理を行っていることに拠ります。よって、これがない場合は HTML の表で末尾が空行になります。

一方で、右欄においては、そもそも HTML は「行」という区切りはまず無意味なので、複数行フラグはむしろ不要です。さらに言えば、右欄のテキストエリアの改行がなくても同様に TSV 形式に変換できないといけません。そこで効いているのがコード例の「replace(/\s*<tr><td>(.*?)<\/td><\/tr>\s*/g, '$1\n')」の \n に関する処理となります。

また、右欄のコード例では、最初の replace(/^\s*<table><tbody>|<\/tbody><\/table>\s*$/g, '') の「g」フラグが冗長だと勘違いしがちですが、この global プロパティがないと、バッファ先頭にマッチしたときバッファ末尾にマッチしなくなるので（先頭と末尾の開きタグと閉じタグを消したいこの場合は）必須です。

table > tbody > tr > th タグに対応した版がこちらにあります。

見逃しがちなのが紀元前の「BC582-BC496」でしょうか。この「BC」のある無しは正規表現で 0 か 1 の繰り返しということで (BC)? と書きますが、参照のためのキャプチャは不要なので (?:BC)? となります。

「肯定先読み言明 (?=〜)」と「肯定後読み言明 (?<=〜)」を以下のように使用すると少しだけ簡潔になります。

変換:

v.replace(/---/g, '—').replace(/(?<=[0-9]{1,4})-(?=(?:BC)?[0-9]{1,4})/g, '–').replace(/。/g, '．').replace(/、/g, '，').replace(/"(.*?)"/g, '“$1”')

⬁ Code

逆変換:

v.replace(/—/g, '---').replace(/(?<=[0-9]{1,4})–(?=(?:BC)?[0-9]{1,4})/g, '-').replace(/．/g, '。').replace(/，/g, '、').replace(/[“”]/g, '"')

⬀ Code

「肯定後読み言明」を使わなくてもキャプチャしてしまえばよいので何とかなりますが、「否定後読み言明 (?<!〜)」の方はそうはいかないでしょうから、未対応の SeaMonkey では戦略の練り直しが必要になるかもしれません。とは言え、簡潔に書けなくなるだけで、不可能ということにはならないはずです。特に Javascript では関数形式の置換先が可能なので、それを使えばなんとかなります。

ともあれ、「キャプチャグループ (後方参照)・非キャプチャグループ」はマッチする範囲に含まれますが、キャプチャグループの外の「言明」はマッチする範囲には含まれないことに留意しましょう。

左欄のコード例を、右欄と同じ戦略で実装すると以下のようになります。

v.replace(/[－０-９]/g, m=>{ const imap = { '－': '-', '０': 0, '１': 1, '２': 2, '３': 3, '４': 4, '５': 5, '６': 6, '７': 7, '８': 8, '９': 9, }; return imap[m]; })

しかし、数字は流石に Unicode で順序よく並びますので、コード変換で両者を実装し直すと以下のようになります。

変換:

v.replace(/[－０-９]/g, m=>{ const imap = { '－': '-', ...Object.fromEntries((new Array(10)).fill(0).map((v,i)=>[ String.fromCodePoint(0xff10 + i), String.fromCodePoint(0x30 + i) ])), }; return imap[m]; })

⬁ Code

逆変換:

v.replace(/[-0-9]/g, m=>{ const map = { '-': '－', ...Object.fromEntries((new Array(10)).fill(0).map((v,i)=>[ String.fromCodePoint(0x30 + i), String.fromCodePoint(0xff10 + i) ])), }; return map[m]; })

⬀ Code

元のコード例の戦略を踏襲したこともあって、コードとしては逆に長くなってしまいました。しかし、キー値である Javascript の Object (キー値、辞書型) をアルゴリズムで生成する好例となっています。キー値の手動での列挙と同等なものを自動生成しているだけですが、一見して不明な方はじっくり Javascript の仕様から読み解くことをお勧めします。

ちなみに、const map = { key: value, ... }; は v.replace 内のスコープ外で定義すべきです（そうしていないのは、この頁の設計上の都合です）。[2022/03/07 追記] そのように修正し、ついでに、正規表現も動的に生成するように改善したものを以下に記しておきます。その設計上の都合があって Javascript の深い知識がないと難しいかもしれませんが、大いに参考になると思います。

変換:

(v=>{
  const imap = {
    '－': '-',
    ...Object.fromEntries((new Array(10)).fill(0).map((v,i)=>[ String.fromCodePoint(0xff10 + i), String.fromCodePoint(0x30 + i) ])),
  }; 
  return v.replace(new RegExp(`[${Object.keys(imap).join('')}]`, 'g'), m=>imap[m]);
})(v)

⬁ Code

逆変換:

(v=>{
  const map = {
    '-': '－',
    ...Object.fromEntries((new Array(10)).fill(0).map((v,i)=>[ String.fromCodePoint(0x30 + i), String.fromCodePoint(0xff10 + i) ])),
  };
  return v.replace(new RegExp(`[${Object.keys(map).join('')}]`, 'g'), m=>map[m]);
})(v)

⬀ Code

用途は同じではないのですが string.normalize() のみに特化した版がこちらにあります。

コード例にて使用されている主な正規表現を解説します。ちなみに、以下「行列要素」とは表におけるセルの内容を指すものとします。

変換: TSV ⇒ CSV

/(^|\t+)(.*?)(?=\t+|$)/mg

行列要素を２番目のキャプチャグループへ抽出

/^(.*[,"].*)$/

行列要素の中にカンマやダブルクオートが存在

逆変換: CSV ⇒ TSV

/(".*?(?:""|,).*?"|.*?)(,|$)/mg

カンマで終わるか末尾の、ダブルクオートで囲われたカンマもしくは２つ並びのダブルクオートが中にある行列要素、または、任意の文字列の行列要素を、１番目のキャプチャグループへ抽出

/^"(.*)"$/

ダブルクオートで囲われた文字列である行列要素

コード例では、これらと関数形式の置換先も駆使して変換・逆変換を実現しています。

この改良版がこちらにあります。

上述のさまざまな条件を想定して、解決策を考えてみます。

絵文字の ♀ と ♂ を変換 … ♀ → ♂ のときに既存の ♂ はそのままという条件

記号と絵文字の変換を行うとき … 単純に置換（コード例のまま）

v.replace(/♀/g, '♂')
v.replace(/♂/g, '♀')

絵文字のみの変換を行うとき … ゼロ幅結合子 (\u200d) と一緒に変換

v.replace(/\u200d♀/g, '\u200d♂')⬁ Code
v.replace(/\u200d♂/g, '\u200d♀')⬀ Code

絵文字以外の変換を行うとき …

否定後読み言明を使用

v.replace(/(?<!\u200d)♀/g, '♂')⬁ Code
v.replace(/(?<!\u200d)♂/g, '♀')⬀ Code

否定後読み言明を不使用

v.replace(/(^|[^\u200d])♀/g, '$1♂')⬁ Code
v.replace(/(^|[^\u200d])♂/g, '$1♀')⬀ Code

絵文字の ♀ と ♂ を交換（変換と逆変換は等価となる）

記号と絵文字の交換を行うとき … 置換先関数を使う

v.replace(/[♀♂]/g, m=>m == '♀' ? '♂' : '♀')⬁ Code⬀ Code

絵文字のみの交換を行うとき … 置換先関数でゼロ幅結合子 (\u200d)と一緒に変換

v.replace(/\u200d([♀♂])/g, (m, p)=>p == '♀' ? '\u200d♂' : '\u200d♀')⬁ Code⬀ Code

絵文字以外の交換を行うとき … 置換先関数にて

否定後読み言明を使用

v.replace(/(?<!\u200d)[♀♂]/g, m=>m == '♀' ? '♂' : '♀')⬁ Code⬀ Code

否定後読み言明を不使用

v.replace(/(^|[^\u200d])([♀♂])/g, (m,p1,p2)=>p2 == '♀' ? `${p1}♂` : `${p1}♀`)⬁ Code⬀ Code

(SeaMonkey 対応などで) 否定の言明の使用を避けると、このように条件の否定のマッチをキャプチャして差し戻すかたちになり、少々婉曲的ですが実現不可能ではないことがわかるでしょう。