Javascript を使用した簡素化された電子メール抽出

Web ページから電子メール アドレスを抽出する必要があるシナリオが考えられました。これは、同様のページ構造をロードする繰り返しのタスクになりますが、各ページから抽出する電子メール アドレスは異なります。最終的な目標は、これらの電子メール アドレスをコピーしてスプレッドシートに貼り付けることでした。 JavaScript を実行するブックマークを作成するのが、電子メールを抽出する最も簡単な方法でした。その方法を学びましょう!

メールの抽出

私の特定の例では、抽出しようとした電子メールは、特定の ID を持つテーブル内にありました。繰り返しますが、目標は、これらのメールを抽出し、クリップボードにコピーし、スプレッドシートに手動で貼り付けることでした。

すぐに呼び出される関数式 (IIFE) を作成することから始めましょう。これにより、すべての変数のスコープが関数自体にきちんと保たれます。コードの後半で await を使用するため、関数を async としても定義します。

(async () => {

})();

最初に確認する必要があるのは、このコードが動作する Web ページに実際にアクセスしているかどうかです。そうでない場合は、アラートを表示してエラーをスローし、残りのコードの実行を停止する必要があります。

if (!window.location.href.startsWith('URL_HERE')) {
  const hrefError = 'This bookmark cannot be used on this webpage.';
  alert(hrefError);
  throw hrefError;
}

一意の ID でテーブルを見つけてみましょう。

const table = document.getElementById('ID_HERE');

テーブルが見つからない場合は、アラートを表示し、エラーをスローして残りのコードの実行を停止する必要があります。

if (!table) {
  const tableError = 'Table not found';
  alert(tableError);
  throw tableError);
}

次に、テーブル内のすべてのリンクを探してみましょう。

const links = table.getElementsByTagName('a');

email という変数も作成しましょう。最初は空の配列で、見つかったすべてのメールを保存できます。

const emails = [];

テーブル内で見つかったすべてのリンクをループし、href 属性が mailto で始まるかどうかを確認する必要があります。見つかった場合は、メールが見つかりました。 mailto: プレフィックスを削除し、電子メール配列に追加できる電子メールが残ります。

for (const link of links) {
  const href = link.getAttribute('href');

  if (href && href.startsWith('mailto:')) {
    emails.push(href.substring(7));
  }
}

メールの配列ができたので、各メールの間に改行文字を入れた文字列としてクリップボードにコピーしましょう。これにより、スプレッドシートにデータを貼り付ける準備として、データの書式が適切に設定されます。クリップボード API は非同期関数であるため、await を使用します。

await navigator.clipboard.writeText(emails.join('\n'));

あとは、クリップボードにコピーされたメールの数を表示するだけです。

alert(`${emails.length} emails copied to clipboard`);

最終的なコードは次のとおりです:

(async () => {
  if (!window.location.href.startsWith('URL_HERE')) {
    const hrefError = 'This bookmark cannot be used on this webpage.';
    alert(hrefError);
    throw hrefError;
  }

  const table = document.getElementById('ID_HERE');

  if (!table) {
    const tableError = 'Table not found';
    alert(tableError);
    throw tableError;
  }

  const links = table.getElementsByTagName('a');
  const emails = [];

  for (const link of links) { 
    const href = link.getAttribute('href'); 

    if (href && href.startsWith('mailto:')) { 
      emails.push(href.substring(7)); 
    } 
  }

  await navigator.clipboard.writeText(emails.join('\n'));
  alert(`${emails.length} emails copied to clipboard`);
})();

なぜブックマークなのか?

最初にこれに取り組み始めたとき、Google Chrome スニペットを使用してみました。クリップボードにコピーしようとしたところ、機能しませんでした。その理由は、クリップボードの使用を許可する前に、ユーザーがボタンをクリックするなどのアクションを実行する必要があるためです。

ページにボタンを挿入しました。クリックすると、電子メールを取得してクリップボードにコピーする機能が実行されます。ただし、これは、ユーザーがブラウザの開発者ツールを開いてスニペットを実行し、ボタンをクリックする必要があることを意味します。特に技術に詳しくない人や、開発者ツールなどの使用に戸惑う人にとっては、手順が多すぎます。

Google Chrome 拡張機能を作成することもできましたが、これはもちろんストアに追加したかったものではありません。これは非常に特殊な使用例向けでした。拡張機能を開発してパッケージ化し、解凍された拡張機能を手動でロードする方法をユーザーに説明しなければなりません。繰り返しになりますが、テクノロジーに詳しくない人にとっては簡単ではありません。

ブックマークがさらに簡単になりました!ブックマーク URL で JavaScript を実行できます!

ブックマークの作成

Google Chrome のメニュー内で、[ブックマークとリスト] > [ブックマークとリスト] に移動します。ブックマークマネージャー。 [ブックマーク マネージャー] メニューで、[新しいブックマークの追加] を選択します。

[名前] フィールドで、ブックマークに「メールの抽出」のような名前を付けます。 URL フィールドに、まず javascript: (はい、javascript という単語の後にコロンを含めます) と入力し、上記から電子メールを抽出するコードを貼り付けます。ブックマークを保存します。

ブックマーク バーが表示されていない場合は、Google Chrome のメニューに移動し、[ブックマークとリスト] > [ブックマーク] を選択します。ブックマークバーを表示します。作成したばかりのブックマークが表示されるはずです。

URL にアクセスしてブックマークをクリックすると、クリップボードにコピーされたメールの数を示すアラートが表示されます。

---

当社のウェブサイト https://nightwolf.dev にアクセスし、Twitter でフォローしてください!

以上がJavascript を使用した簡素化された電子メール抽出の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。