ウェブページ上の指定クラス要素に含まれるテキストを連結し、クリップボードへ書き込む JavaScript のスニペットです。
ブックマークレットとして利用します。
-
適当なページをブックマークする。
-
ブックマークを以下のとおり編集する。
- 名前: お好みの名前
- URL: clip-elements.js の全文を挿入する。
-
登録したブックマークをクリックする。
-
メモ帳などへペーストする。
-
見出しテキスト(
mw-headline
クラス要素内のテキスト)がカンマ・改行区切りでペーストできたことを確認する。概要, プログラミング言語としての特徴, ... 関連項目, 外部リンク
※ ブックマークレットの実行に失敗した場合はアラートを表示します。内容を確認してもう一度実行してください。
この他、正常に実行できなかった場合は 3. 補足 セクションを参照してください。
動作を調整したい場合、以下の方法で編集~ブックマークレット化を行ってください。
- clip-elements-source を適宜編集する。
- コメントを除去する。
- 改行・空白・タブ削除ツール で不要な改行と空白を除去する。
設定
の改行
タブ
行頭・行末のスペース
へチェックを入れる。- 左ペインにコードを挿入する。
- 右ペインに出力される。
- Bookmarklet Maker にてブックマークレット化する。
Code
へコードを挿入する。Generate Bookmarklet
をクリックする。Output
に出力される。
- テスト実行と同じ方法でブックマークへ登録・テストする。
- 要素テキストはカンマ・改行コード区切りで連結します。
- 改行コードは LF(
\n
)です。 - 連結後のテキスト末尾にも改行コードを付与します。
- 改行コードは LF(
- 以下の場合、アラートを表示して処理を終了します。
- 定数
GET_CLASS_NAME
で指定されているクラス要素がページ上に存在しなかった場合。 - クリップボードへの書き込みに失敗した場合。
- 定数
- 対象のページがアクティブになっていないとクリップボードへの書き込みが正常に動作しません。
- 正しくペーストできなかった場合、ウェブページ内のどこかをクリックした後に再度ブックマークレットを実行してください。
- HTTPS 通信環境でのみ実行できます。
- HTTP 通信環境の場合、「クリップボードへの書き込みに失敗した場合」のアラートを表示して終了します。
- Bookmarkletを作ろう(準備編) - Qiita
- ウェブページにある表をクリップボードにポチッとコピーするブックマークレットの巻
- Chrome Dev Toolでブックマークレットを実行する - Qiita
- Clipboard.writeText() - Web API | MDN
- クリップボードへ書き込みを行うメソッド。
- 開発者ツールで実行できないので注意。
参考: navigator.clipboard.writeText() で「Document is not focused.」エラー - キリウ君が読まないノート - このメソッドは HTTPS 通信環境での実行のみに対応。HTTP 通信環境下ではエラーを返す。
参考: [JS] http環境ではnavigator.clipboard.writeTextがエラーになる - プロプログラマ -Flex,Air,C#,Oracle,HTML5+JS-
- 改行・空白・タブ削除ツール|ちょっと便利なツール・ジェネレーター置き場
- Bookmarklet Maker