会社の管理画面での作業中になんかテキストを一括で置換したいなと思い作ってみたところ、結構よかったので共有します。
ブックマークレットとは？
「ブックマークレット」とは、ブラウザのブックマーク（お気に入り）として登録できる短いプログラム（主にJavaScript）のことです。
- 普段のWebページのURLの代わりに、JavaScriptのコードをブックマークとして保存します。
- クリックするだけで、そのページ上でプログラムが実行されます。
- 拡張機能のインストール不要で、手軽に使えるのが特徴です。
※PC版のChrome、Edge、Firefoxなどで利用できます。スマートフォンでは動作しない場合があります。
デモ動画
実際にWebページでブックマークレットを起動した際のイメージです。
コード紹介
javascript:(()=>{const id='__bm_replace_box__';if(document.getElementById(id)){return;}const $=document.createElement.bind(document);const box=$('div');box.id=id;Object.assign(box.style,{position:'fixed',top:'10px',right:'10px',zIndex:999999,padding:'10px',background:'#fff',border:'1px solid #666',borderRadius:'8px',fontSize:'14px',boxShadow:'0 2px 8px rgba(0,0,0,.3)',maxWidth:'320px'});const taFind=$('textarea'),taRepl=$('textarea');[taFind,taRepl].forEach(t=>{t.rows=3;t.style.width='100%';t.style.boxSizing='border-box';t.style.marginBottom='4px';});taFind.placeholder='置換前のテキスト';taRepl.placeholder='置換後のテキスト';const btn=$('button');btn.textContent='置換実行';btn.style.width='100%';btn.style.marginTop='4px';btn.onclick=()=>{const find=taFind.value;const repl=taRepl.value;if(!find){alert('置換前テキストを入力してください');return;}const regex=new RegExp(find,'g');const walker=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false);let node;while(node=walker.nextNode()){node.nodeValue=node.nodeValue.replace(regex,repl);}alert('置換完了');};const closeBtn=$('button');closeBtn.textContent='×';Object.assign(closeBtn.style,{position:'absolute',top:'4px',right:'4px',border:'none',background:'transparent',fontSize:'16px',cursor:'pointer'});closeBtn.onclick=()=>box.remove();box.append(closeBtn,taFind,taRepl,btn);document.body.append(box);})();
これをブックマークレットとして登録しておくと、管理画面でテキストを一括で置換できます。
⚠️ 注意: ブックマークレットは文字数制限や改行が使えないため、コードはそのままコピー＆ペーストしてお使いください。
コードの構造と機能
ブックマークレットのコードは以下の主要な部分で構成されています：
-
初期化と重複チェック
- すでに置換ボックスが表示されていれば新たに作らず、画面がボックスだらけになるのを防ぎます。
-
画面に表示する部品の作成
- 置換ボックス（白い枠）と2つのテキスト入力欄、「置換実行」ボタン、「×」ボタンを作ります。
-
見た目の設定
- 右上固定、白背景、グレー枠、角丸、影付きで見やすく。
- 入力欄・ボタンは横幅いっぱいで操作しやすい。
-
ボタンの動作設定
- 「置換実行」：入力チェック→ページ内テキスト置換→完了通知。
- 「×」：ボックスを閉じる。
-
画面への表示
- 作った部品を組み立てて右上に表示。
使い方
- 上記のコードをすべてコピーします。
- ブラウザの「ブックマークバー」に新しいブックマークを作成します。
- （Chromeの場合：ブックマークバー上で右クリック→「ページを追加」）
- 「URL」欄にコピーしたコードを貼り付け、「名前」は分かりやすいもの（例：テキスト置換）にします。
- テキストを一括置換したいWebページ（管理画面など）を開きます。
- 先ほど作成したブックマークレットをクリックします。
- 画面右上に「置換前のテキスト」「置換後のテキスト」入力欄が表示されます。
- それぞれ入力し、「置換実行」ボタンを押すと、ページ内のテキストが一括で置換されます。
- ダイアログ右上の「×」ボタンでウィンドウを閉じられます。
※「ブックマークバー」や「URL欄」の場所が分からない場合は、ブラウザのヘルプや画像検索も参考にしてください。
注意点
- 置換はページ内の「テキストノード」すべてが対象です。フォームの入力欄やボタンのラベルなども置換される場合があります。
- 正規表現での検索となるため、特殊文字（例:
.や*など）を検索したい場合はエスケープが必要です。 - 置換操作は元に戻せません。必要に応じてページをリロードして元に戻してください。
- 一部のWebアプリケーションでは、仮想DOMや動的レンダリングの影響で、置換が反映されない場合があります。
- セキュリティ上、信頼できるページでのみご利用ください。
おわりに
ちょっとしたテキストの一括置換作業が必要なときに便利です。