出現(xiàn)了一個場景，需要從網頁中提取電子郵件地址。這將是一項重復性任務，加載類似的頁面結構，但從每個頁面提取不同的電子郵件地址。最終目標是將這些電子郵件地址復制并粘貼到電子表格中。創(chuàng)建運行 JavaScript 的書簽是提取電子郵件的最簡單方法。讓我們來學習一下吧！

提取電子郵件

在我的特定示例中，我們想要提取的電子郵件位于具有特定 ID 的表內。同樣，我們的目標是提取這些電子郵件，將它們復制到剪貼板，然后手動將它們粘貼到電子表格中。

我們首先創(chuàng)建一個立即調用函數表達式 (IIFE)。這將使所有變量的范圍清晰地限定在函數本身范圍內。因為我們后面要在代碼中使用await，所以我們也將函數定義為async。

(async () => {

})();

我們應該檢查的第一件事是我們是否確實在該代碼將起作用的網頁上。如果不是，我們應該顯示警報并拋出錯誤以停止其余代碼的運行。

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

現(xiàn)在讓我們查找表中的所有鏈接。

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

我們還創(chuàng)建一個名為 emails 的變量，它將是一個空數組，以便我們可以存儲找到的所有電子郵件。

const emails = [];

我們需要循環(huán)遍歷表中找到的所有鏈接，看看 href 屬性是否以 mailto 開頭。如果是，那么我們就找到了一封電子郵件！我們將刪除 mailto: 前綴并留下可以添加到 emails 數組中的電子郵件。

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

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

現(xiàn)在我們有了一個電子郵件數組，讓我們將它們作為字符串復制到剪貼板，每封電子郵件之間有一個換行符。這可以更好地格式化數據，為將數據粘貼到電子表格中做好準備。我們使用await，因為剪貼板API是一個異步函數。

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 Snippet。當我要復制到剪貼板時，它不起作用。原因是因為用戶必須在允許使用剪貼板之前執(zhí)行操作，例如單擊按鈕。

我在頁面中注入了一個按鈕，單擊該按鈕將運行該功能以獲取電子郵件并將其復制到剪貼板。然而，這意味著用戶必須打開瀏覽器的開發(fā)人員工具，運行代碼片段，然后單擊按鈕。步驟太多，特別是對于那些可能不懂技術或對使用開發(fā)人員工具之類的東西感到困惑的人。

我還可以創(chuàng)建一個 Google Chrome 擴展程序，但這當然不是我想添加到商店的東西！這是針對一個非常具體的用例。我必須開發(fā)擴展，將其打包，并向用戶解釋如何手動加載未打包的擴展！再說一次，對于不懂技術的人來說這并不容易。

書簽更容易！您可以在書簽網址中運行 javascript！

創(chuàng)建書簽

在 Google Chrome 的菜單中，導航至“書簽和列表”>書簽管理器。在書簽管理器菜單下，選擇添加新書簽。

在“名稱”字段中，為書簽指定一個名稱，例如“提取電子郵件”。在 URL 字段中，首先輸入 javascript:（是的，在 javascript 一詞后添加冒號），然后粘貼代碼以從上面提取電子郵件。保存書簽。

如果您看不到書簽欄，請轉到 Google Chrome 的菜單并選擇“書簽和列表”>“書簽”。顯示書簽欄。您剛剛創(chuàng)建的書簽應該是可見的。

訪問網址，單擊書簽，您應該會收到一條提醒，顯示復制到剪貼板的電子郵件數量！

---

訪問我們的網站 https://nightwolf.dev 并在 Twitter 上關注我們！

以上是使用 Javascript 書簽簡化電子郵件提取的詳細內容。更多信息請關注PHP中文網其他相關文章！