Pengekstrakan E-mel Ringkas dengan Penanda Halaman Javascript

Senario muncul di mana terdapat keperluan untuk mengekstrak alamat e-mel daripada halaman web. Ini akan menjadi tugas yang berulang, memuatkan struktur halaman yang serupa, tetapi dengan alamat e-mel yang berbeza untuk diekstrak daripada setiap halaman. Matlamat akhir adalah untuk menyalin dan menampal alamat e-mel ini ke dalam hamparan. Mencipta penanda halaman yang menjalankan Javascript adalah pendekatan paling mudah untuk mengekstrak e-mel. Mari belajar caranya!

Ekstrak E-mel

Dalam contoh khusus saya, e-mel yang ingin kami ekstrak berada di dalam jadual yang mempunyai id tertentu. Sekali lagi, matlamatnya adalah untuk mengekstrak e-mel ini, menyalinnya ke papan keratan dan menampalnya secara manual ke dalam hamparan.

Mari mulakan dengan mencipta ungkapan fungsi yang dipanggil serta-merta (IIFE). Ini akan memastikan semua pembolehubah diskop dengan kemas kepada fungsi itu sendiri. Disebabkan kami ingin menggunakan await kemudian dalam kod, kami juga mentakrifkan fungsi sebagai async.

(async () => {

})();

Perkara pertama yang perlu kita semak ialah sama ada kita benar-benar berada di halaman web yang kod ini akan berfungsi. Jika tidak, kami harus menunjukkan amaran dan membuang ralat untuk menghentikan selebihnya kod daripada dijalankan.

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

Mari cari jadual itu dengan id uniknya.

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

Jika jadual tidak ditemui, kami harus menunjukkan amaran dan membuang ralat untuk menghentikan baki kod daripada dijalankan.

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

Sekarang mari kita cari semua pautan dalam jadual.

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

Mari kita juga buat pembolehubah yang dipanggil e-mel, yang akan menjadi tatasusunan kosong untuk bermula, supaya kita boleh menyimpan semua e-mel yang kita temui.

const emails = [];

Kami perlu mengulangi semua pautan yang kami temui dalam jadual dan melihat sama ada atribut href bermula dengan mailto. Jika ya, maka kami telah menemui e-mel! Kami akan mengalih keluar awalan mailto: dan ditinggalkan dengan e-mel yang boleh kami tambahkan pada tatasusunan e-mel.

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

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

Sekarang kita mempunyai pelbagai e-mel, mari salinnya ke papan keratan sebagai rentetan dengan aksara baris baharu di antara setiap e-mel. Ini memformat data dengan lebih baik sebagai persediaan untuk menampalnya ke dalam hamparan. Kami menggunakan await kerana api papan keratan ialah fungsi tak segerak.

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

Apa yang perlu dilakukan ialah menunjukkan bilangan e-mel yang telah disalin ke papan keratan.

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

Ini kod akhir:

(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`);
})();

Mengapa Penanda Buku?

Apabila saya mula mengerjakan perkara ini, saya cuba menggunakan Coretan Google Chrome. Apabila saya sampai ke tahap menyalin ke papan keratan, ia tidak berfungsi. Sebabnya ialah kerana pengguna mesti mengambil tindakan, seperti mengklik butang, sebelum membenarkan papan keratan digunakan.

Saya menyuntik butang ke dalam halaman yang apabila diklik akan menjalankan fungsi untuk mendapatkan e-mel dan menyalinnya ke papan keratan. Walau bagaimanapun, ini bermakna pengguna perlu membuka alatan pembangun penyemak imbas, jalankan coretan, kemudian klik butang. Terlalu banyak langkah, terutamanya untuk seseorang yang mungkin tidak mahir teknologi atau akan keliru menggunakan sesuatu seperti alat pembangun.

Saya juga boleh membuat Sambungan Google Chrome, tetapi ini bukan sesuatu yang saya mahu tambahkan pada kedai sudah tentu! Ini adalah untuk kes penggunaan yang sangat khusus. Saya perlu membangunkan sambungan, membungkusnya, dan menerangkan kepada pengguna cara memuatkan sambungan yang tidak dibungkus secara manual! Sekali lagi, bukan mudah untuk seseorang yang mungkin tidak mahir teknologi.

Penanda halaman lebih mudah! Anda boleh menjalankan javascript dalam url penanda halaman!

Cipta Penanda Halaman

Dalam menu Google Chrome, navigasi ke Penanda Halaman dan senarai > Pengurus penanda halaman. Di bawah menu pengurus Penanda halaman, pilih Tambah penanda halaman baharu.

Di medan Nama, berikan penanda halaman nama seperti Ekstrak E-mel. Pada medan URL, mulakan dengan menaip javascript: (ya, masukkan titik bertindih selepas perkataan javascript) dan kemudian tampal kod untuk mengekstrak e-mel dari atas. Simpan penanda halaman.

Jika anda tidak mempunyai bar penanda halaman kelihatan, pergi ke menu Google Chrome dan pilih Penanda Halaman dan senarai > Tunjukkan bar penanda halaman. Penanda halaman yang baru anda buat seharusnya kelihatan.

Lawati url, klik penanda halaman dan anda akan mendapat makluman yang menunjukkan kepada anda bilangan e-mel yang disalin ke papan keratan!

Lawati tapak web kami di https://nightwolf.dev dan ikuti kami di Twitter!

Atas ialah kandungan terperinci Pengekstrakan E-mel Ringkas dengan Penanda Halaman Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!