出現了一個場景,需要從網頁中提取電子郵件地址。這將是一項重複性任務,載入類似的頁面結構,但從每個頁面提取不同的電子郵件地址。最終目標是將這些電子郵件地址複製並貼上到電子表格中。建立執行 JavaScript 的書籤是提取電子郵件的最簡單方法。讓我們來學習一下吧!
在我的特定範例中,我們想要提取的電子郵件位於具有特定 ID 的表內。同樣,我們的目標是提取這些電子郵件,將它們複製到剪貼板,然後手動將它們貼上到電子表格中。
我們先建立一個立即呼叫函數表達式 (IIFE)。這將使所有變數的範圍清晰地限定在函數本身範圍內。因為我們後面要在程式碼中使用await,所以我們也將函數定義為async。
我們應該檢查的第一件事是我們是否確實在該程式碼將起作用的網頁上。如果不是,我們應該顯示警報並拋出錯誤以停止其餘程式碼的運行。
讓我們透過其唯一 ID 找到該表。
如果找不到表,我們應該顯示警報並拋出錯誤以停止其餘程式碼的運行。
現在讓我們找出表中的所有連結。
我們還建立一個名為 emails 的變量,它將是一個空數組,以便我們可以儲存找到的所有電子郵件。
我們需要循環遍歷表中找到的所有鏈接,看看 href 屬性是否以 mailto 開頭。如果是,那麼我們就找到了一封電子郵件!我們將刪除 mailto: 前綴並留下可以添加到 emails 陣列中的電子郵件。
現在我們有了一個電子郵件數組,讓我們將它們作為字串複製到剪貼板,每封電子郵件之間有一個換行符。這可以更好地格式化數據,為將數據貼到電子表格中做好準備。我們使用await,因為剪貼簿API是一個非同步函數。
剩下要做的就是顯示有多少電子郵件被複製到剪貼簿。
這是最終程式碼:
當我第一次開始研究這個問題時,我嘗試使用 Google Chrome Snippet。當我要複製到剪貼簿時,它不起作用。原因是因為使用者必須在允許使用剪貼簿之前執行操作,例如按一下按鈕。
我在頁面中註入了一個按鈕,單擊該按鈕將運行該功能以獲取電子郵件並將其複製到剪貼簿。然而,這意味著使用者必須打開瀏覽器的開發人員工具,運行程式碼片段,然後按一下按鈕。步驟太多,特別是對於那些可能不懂技術或對使用開發人員工具之類的東西感到困惑的人。
我還可以創建一個 Google Chrome 擴展程序,但這當然不是我想添加到商店的東西!這是針對一個非常具體的用例。我必須開發擴展,將其打包,並向用戶解釋如何手動加載未打包的擴展!再說一遍,對於不懂科技的人來說這並不容易。
書籤更容易!您可以在書籤網址中執行 javascript!
在 Google Chrome 的選單中,導覽至「書籤和清單」>書籤管理員。在書籤管理員選單下,選擇新增書籤。
在「名稱」欄位中,為書籤指定一個名稱,例如「提取電子郵件」。在 URL 欄位中,首先輸入 javascript:(是的,在 javascript 一詞後添加冒號),然後貼上程式碼以從上面提取電子郵件。儲存書籤。
如果您看不到書籤欄,請前往 Google Chrome 的選單並選擇「書籤和清單」>「書籤」。顯示書籤列。您剛剛建立的書籤應該是可見的。
訪問網址,點擊書籤,您應該會收到一條提醒,顯示複製到剪貼簿的電子郵件數量!
造訪我們的網站 https://nightwolf.dev 並在 Twitter 上關注我們!
以上是使用 Javascript 書籤簡化電子郵件擷取的詳細內容。更多資訊請關注PHP中文網其他相關文章!