コードを書いていたり、文章を書いていたりすると自動で同時に複数の条件を適用して文字列を変換したくなることがありませんか…？
エディタを使って変換したりしていたのですが、条件を一つしか設定できなかったり、いちいち変換のためにボタンを押すかショートカットを押さないといけなくて、少し不便だったので、ブラウザを使って自分で簡単に実装できるか試してみました。
一応 Replacer と名付けてみたので(?)、もしよかったら使ってみてください。
実装の詳細などについては下に書いていきます！
1. Replacer のデモ
1.1. デモ
1.2. 使い方・仕様
- 変換は上から順に適用される (同時ではない)
- 入力と同時に変換される
- 出力欄をクリックするとコピーできる
- 正規表現 (以下参照) も使える
- 変換後を $n のようにすると ( ) で括られた n 番目の文字列を再利用できる
- 「句読点」、「ファイル名」などは個人的によく使う変換なのですが、追加して欲しいものなどあれば気軽に下のコメント欄からコメントください
1.3. 正規表現
| パターン式 | 内容 |
|---|---|
| [ ] | [ ] 内に指定した文字のどれかと一致 |
| [^ ] | [ ] 内に指定した文字以外と一致 |
| ^ | 行頭と一致 |
| $ | 行末と一致 |
| . | 任意の 1 文字と一致 |
| ( ) | 正規表現をグループにまとめる |
| | | 前後にある正規表現のいずれかと一致 |
| + | 直前の正規表現の1回以上の繰り返しに一致 |
| ? | 直前の正規表現に 0 回 or 1 回一致 |
| {m,n} | 直前の正規表現のm～n回の繰り返しに一致 |
| +? | 直前の正規表現の1回以上の繰り返しに一致 |
| *? | 直前の正規表現の0回以上の繰り返しに一致 |
| ?? | 直前の正規表現に0回もしくは 1 回一致 |
| * | 直前の正規表現の0回以上の繰り返しに一致 |
| {m,n}? | 直前の正規表現のm～n回の繰り返しに一致 |
| \ | メタ文字を打ち消す |
| \A | 文字列の先頭と一致 |
| \b | 単語境界と一致 (\w と \W の間の空文字列と一致) |
| \B | \B 以外と一致 |
| \d | 数字と一致 ( [0-9] と同じ ) |
| \D | \d以外と一致 |
| \s | 空白文字と一致 |
| \S | \s 以外と一致 |
| \w | 英数字とアンダースコア_に一致 |
| \W | \w 以外と一致 |
| \Z | 文字列の末尾と一致 |
この表は以下の記事を参考にしました。
ここに参考にした記事を貼っていたのですが、リンク切れになってしまいました… 
2. 実装
2.1. フレームワーク等
文字列の変換などを簡単に記述するために jQuery を用い、UI を整えるために Bootstrap を用いています。
2.2. 文字列の変換
文字列の変換は JavaScript で正規表現を扱うための RegExp と、文字列を変換してくれる replace というメソッドを利用しています。update_output 関数では「変換前」、「変換後」の input タグに入力された文字列を順に取得して、上から順に正規表現に従って変換するという処理を行っています。RegExp を定義するときに、g オプションを付けることで、置き換えたい文字列が複数含まれている場合に、全てを置き換えてくれます。RegExp のオプションについては以下の記事などで解説されています。
<div class="form-row input-pattern">
<div class="col-5 d-flex align-items-center">
<input type="text" class="ptn bf" style="width:100%;" placeholder="変換前">
</div>
<div class="col-1 d-flex align-items-center justify-content-center">
<input type="button" value="⇔" class="swap">
</div>
<div class="col-5 d-flex align-items-center">
<input type="text" class="ptn af" style="width:100%;" placeholder="変換後">
</div>
<div class="col-1 d-flex align-items-center justify-content-center">
<input type="button" value="－" class="del">
</div>
</div>function update_output() {
$('#out_txt').val(function() {
var txt = $('#in_txt').val(); // 変換したい文字列を取得
$('.input-pattern').each(function(){
var bf = $(this).find('.bf').val(); // 変換前の文字列を取得
if (bf != '') {
bf = new RegExp(bf, 'g'); // 変換前の文字列を正規表現に変換
var af = $(this).find('.af').val(); // 変換後の文字列を取得
txt = txt.replace(bf, af); // 正規表現に従って文字列を変換
}
});
return txt; // 文字列を変換した結果
});
}2.3. 変換の即時反映
変換パターンや変換したい文字列を入力したときに即時に変換結果が反映されるように処理を行います。jQuery の .keyup メソッドを用いて、キーボードのキーが押されて、上がった瞬間に update_output 関数が発火するように設定しています。#in_txt は変換したい文字列、.ptn は変換パターンの入力欄を表す id、class です。
$('#in_txt, .ptn').keyup(update_output);2.4. 出力欄をクリックするだけでコピー
出力欄をクリックするだけでその欄を全選択してコピーする機能を実装していきます。
一番下の行のように変換後の文字列の出力欄にフォーカスが当たる、またはその欄がクリックされたときに copy_output 関数が発火するように設定しておきます。(#out_txt は出力欄を表す id です。)
copy_output 関数では出力欄を選択し、その内容をクリップボードにコピーします。
このまま出力欄のフォーカスを外さないでいると、画面をクリックしたときに再びコピーされてしまうので、一秒後に出力欄からのフォーカスを外すコードを追加している。
function copy_output() {
$('#out_txt').select(); // 出力欄を選択
navigator.clipboard.writeText($('#out_txt').val()); // 出力欄の内容をコピー
$('#copy_alert').show(); // コピーしたことを示すアラートの表示
setTimeout(function() {
if (window.getSelection) { // 出力欄からフォーカスを外し、コピーされないようにする
window.getSelection().removeAllRanges();
document.activeElement.blur();
}
$('#copy_alert').hide(); // アラートの削除
}, 1000);
}
$('#out_txt').focus(copy_output).click(copy_output);2.5. WordPress 上での動作
WordPress 上で動作させるためにはフレームワークや今回作成した JavaScript のファイル (replacer.js) を読み込んでもらわなければなりません。
まず、jQuery についてですが、WordPress にデフォルトで読み込まれているはずなので、特に設定する必要はありませんが、$ を jQuery に置き換えないと動作しないので注意してください。
詳しくは以下の記事をご覧ください。
次に、replacer.js を読み込めるように設定しますが、とりあえずこのファイルを FTP を使うか、scp コマンドを使うなどして、WordPress のテーマフォルダの中にアップロードしておいてください。
筆者の場合は wp-content/themes/<テーマ名> のフォルダの中にアップロードしました。
詳しくは以下の記事も参考にしてください。
また、Bootstrap のファイル (bootstrap.min.css) についても同様にアップロードしておいてください。
先程アップロードした replacer.js と bootstrap.min.css を読み込めるように子テーマの functions.php を編集していきます。
読み込みたい記事の ID を以下のサイトなどを参考にしながら調べて、<記事の ID> を置き換えてください。
<?php
function add_header_for_replacer(){
if(is_single(<記事の ID>)) { ?>
<link href="<?php echo get_stylesheet_directory_uri() ?>/bootstrap.min.css" rel="stylesheet">
<script src="<?php echo get_stylesheet_directory_uri() ?>/replacer.js" type="text/javaScript" charset="utf-8"></script>
<?php }
};
add_action('wp_head', 'add_header_for_replacer');
?>これで、無事フレームワークや作成した JavaScript のファイルが読み込まれるようになると思います。
後は、投稿記事のカスタム HTML のブロックなどに作成した HTML のコードを入れるなどして、UI 側を各自適当に作ってみてください。
ちなみに、筆者の場合は使っていたテーマの問題で Bootstrap と干渉して、フッターが変になってしまったので、以下の記事の Bootstrap4 互換性対応 を参考に style.css を修正しました。
/* Bootstrap4 Compatibility */
.footer-widgets.col-1,
.footer-widgets.col-2,
.footer-widgets.col-3,
.footer-widgets.col-4 { max-width: 100%; }2.6. その他詳細の実装
以下の GitHub をご覧ください。
3. まとめ
少し不便だなぁと思っていた文字列の変換をブラウザ上で手軽にできるようになりました 
JavaScript や WordPress の勉強にもなったので、すごくよかったなぁ…と思っています。
