Web

Webページ上のコピーしずらい文章をコピーする

投稿日:2022年2月17日 更新日:

1. はじめに

Webページ上の文章をコピーしたいのに、「コピーが禁止されている」、「なぜかドラッグ操作がうまくいかない」などの理由でコピーできない場合があります。

本記事では、そんな場合に文章をコピーする方法を紹介します。

※ 少し強引なやり方です。きれいにコピーできない場合もあります。

2. やり方

Chrome ブラウザで説明しますが、主要なブラウザであれば同じようなことはできると思います。

(1) 以下の赤枠内の文章をコピーしたいとします。

赤枠内の文章がコピーしたい

(2) 対象範囲の左上あたりを右クリックし、[検証] を選択します。

右クリックして [検証] を選択する

(3) デベロッパー ツールの [Elements]パネルが開きます。

このとき、[Elements]パネル内では、右クリックするした要素のHTML部分が選択されています(その行に背景色がついています)。

デベロッパーツールが開く

※ 先に 右上のメニューから [その他のツール] – [デベロッパーツール] を開始しておき、コピーしたい箇所を [Elements] パネル内から探してもよいです。右クリックやキー入力を禁止しているページでは、こちらの手順になります。

(4) その対象となっているHTML要素を右クリックし、[Copy] – [Copy element] を選択します。

対象要素を選択して [Copy] – [Copy element] を選択する

(5) HTMLのタグを削除してくれるWebサービスのページにアクセスします。

ここでは、Online HTML Stripper を利用しますが、他のサービスでもよいです。

「strip html tag online」などのキーワードで検索するといろいろなサービスが見つかるはずです。

例えば、Strip HTML – Remove HTML Tags – Online – Browserling Web Developer Tools というページも見つかります。

(6) 画面中央のフィールドに、先程コピーした文字列を貼り付け、[STRIP HTML] ボタンを押します。

HTMLのタグ部分のみを削除してもらう

(7) HTMLのタグのみが削除された文字列が出力されるので、それをコピーします。

HTMLタグが削除された

(8) エディタ アプリケーションで形を整えます。

以下の画像では、改行を手動で追加しています。

ここでは、改行を追加している

以上です。

あとは、できあがった文字列を本来の目的に利用してください。

3. おわりに

この方法は少し面倒ですが、たまに役に立ちます。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web Security

SSLで使用する証明書運用の不便さ

上のどちらも、SSLの証明書が期限を過ぎてしまったことが原因で起きた問題のようです。 前者は詳しく見ていないので分かりませんが、後者はサーバー証明書ではなくデバイス側に保存されているクライアント証明書 …

Chrome

Chrome 96 で絵文字を太字にすると色がなくなる問題

Chrome 96 で絵文字を太字にすると色がなくなる問題について書いています。

Chrome

Chrome の通信ログ(TCP/IPも含む)を記録する

Chrome の通信ログ(TCP/IPも含む)を記録する方法を紹介します。

DokuWiki

DokuWiki で閲覧専用ユーザーを作る手順

DokuWiki において、閲覧専用ユーザーを作成する手順を紹介します。 目次DokuWiki で、閲覧専用ユーザーを作成する手順1. 閲覧専用グループを追加する。2. ユーザーにグループを指定するお …

Web

Intersection Observer API を使った画像の遅延読み込み

目次1. 画像の遅延読み込み(遅延ローディング)2. Intersection Observer API3. Intersection Observer API を使って画像を遅延読み込みする例1. …