ここのところ立て続けに正規表現と後方参照で乗り切る事態に遭遇したので、メモしておきます。
ケース1: Wordの表で列挙されているURLの一覧をHTMLのtable
に起こしたい
タイトルの通りですが、Wordの表からtable
を作りたい、というケース。
ギルガメシュ https://example.com/gilgamesh.html | ビルガメス https://example.eu/bilgamesh.html | 英雄 |
エンキドゥ http://example.com/enkidu.html | エンキドゥ http://example.net/enkidu.html | 友人 |
グラガンナ http://example.com/gugalanna.html | 牡牛座 https://example.jp/taurus/ | 天の牡牛 |
こんな形式の表が与えられたとき、以下のようなtable
を作りたい。
<table>
<thead>
<tr>
<th>リンク1</th>
<th>リンク2</th>
<th>名前</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://example.com/gilgamesh.html">ギルガメシュ</a></td>
<td><a href="https://example.eu/bilgamesh.html">ビルガメス</a></td>
<td>英雄</td>
</tr>
<tr>
<td><a href="http://example.com/enkidu.html">エンキドゥ</a></td>
<td><a href="http://example.net/enkidu.html">エンキドゥ</a></td>
<td>友人</td>
</tr>
<tr>
<td><a href="http://example.com/gugalanna.html">グラガンナ</a></td>
<td><a href="https://example.jp/taurus/">牡牛座</a></td>
<td>天の牡牛</td>
</tr>
</tbody>
</table>
なお、このWordのテーブルを全選択してテキストにコピペすると、以下のようになりました。
ギルガメシュ
https://example.com/gilgamesh.html ビルガメス
https://example.eu/bilgamesh.html 英雄
エンキドゥ
http://example.com/enkidu.html エンキドゥ
http://example.net/enkidu.html 友人
グラガンナ
http://example.com/gugalanna.html 牡牛座
https://example.jp/taurus/ 天の牡牛
//以下略
途中に改行があって項目の区切れが分かりづらいですが、一定のルールに則っているのは分かります。
また、考慮すべきは以下の点。
http
とhttps
が混ざっている- リンクの終わりについて
.html
と/
が混ざっている
これらを考慮したうえで、上手く冒頭のtable
が作れないか、と。
対処
まず、上述の表からクリップボードにコピーした内容をVSCodeの新規ファイルに貼り付けます。
次に、VSCodeの置換機能で
- 検索条件:
\n(.+)\nhttp(.+)(\/|\.html)\t(.+)\nhttp(.+)(\/|\.html)\t(.+)
- 置換文字列:
<tr>\n<td><a href="http$2$3">$1</a></td>\n<td><a href="http$5$6">$4</a></td>\n<td>$7</td>\n</tr>\n
とします。
すると、上述のコピペした文字列から、下記コードが生まれます。
<tr>
<td><a href="https://example.com/gilgamesh.html">ギルガメシュ</a></td>
<td><a href="https://example.eu/bilgamesh.html">ビルガメス</a></td>
<td>英雄</td>
</tr>
<tr>
<td><a href="http://example.com/enkidu.html">エンキドゥ</a></td>
<td><a href="http://example.net/enkidu.html">エンキドゥ</a></td>
<td>友人</td>
</tr>
<tr>
<td><a href="http://example.com/gugalanna.html">グラガンナ</a></td>
<td><a href="https://example.jp/taurus/">牡牛座</a></td>
<td>天の牡牛</td>
</tr>
これを貼り付けて、table
の開始/終了タグやthead
を用意すれば冒頭の作りたかったコードに辿り着けました。
ケース2: a
タグにtarget="_blank"
とclass="HOGE"
を付けたい
上述のやり方で意図したコードになった……と思ったのですが、うっかりtarget="_blank"
とクラスを付け忘れてしまいました。
対処
もう一度VSCodeの正規表現を使って一括置換します。
- 検索条件:
<a href="(http(s)?://(.)+(\/|\.html))">
- 置換文字列:
<a href="$1" target="_blank" class="HOGE">
すると、以下のようになりました。
<tr>
<td><a href="https://example.com/gilgamesh.html" target="_blank" class="HOGE">ギルガメシュ</a></td>
<td><a href="https://example.eu/bilgamesh.html" target="_blank" class="HOGE">ビルガメス</a></td>
<td>英雄</td>
</tr>
<tr>
<td><a href="http://example.com/enkidu.html" target="_blank" class="HOGE">エンキドゥ</a></td>
<td><a href="http://example.net/enkidu.html" target="_blank" class="HOGE">エンキドゥ</a></td>
<td>友人</td>
</tr>
<tr>
<td><a href="http://example.com/gugalanna.html" target="_blank" class="HOGE">グラガンナ</a></td>
<td><a href="https://example.jp/taurus/" target="_blank" class="HOGE">牡牛座</a></td>
<td>天の牡牛</td>
</tr>
a
タグにtarget="_blank"
とclass="HOGE"
が付きました。これで今度こそゴールです。
ケース3: 関数をアロー関数に書き換える
function Ishtar() {
//処理
}
function Inanna(args) {
//処理
}
上述のようなJSを
const Ishtar = () => {
//処理
}
const Inanna = (args) => {
//処理
}
このように書き換えたい(式の終わりのセミコロンはとりあえず手動で付けるものとします)。
- 検索条件:
function (.*)\((.*)\) \{
- 置換文字列:
const $1 = ($2) => {
引数は1つしかないパターンだったので、これでOKでした。
ということで、三度正規表現(特に後方参照)に助けられたので、備忘録としてメモしておきます。