在JavaScript中替換字符串的所有匹配項

了解在純JavaScript中替換字符串的所有匹配項的正確方法,從正則表達式到其他方法。 使用正則表達式 這個簡單的正則表達式可以完成任務: String.replace(/<TERM>/g, '') 這將執行區分大小寫的替換。 以下是一個示例,我將字符串phrase中單詞’dog’的所有匹配項替換為空字符串: const phrase = 'I love my dog! Dogs are great' const stripped = phrase.replace(/dog/g, '') stripped //"I love my ! Dogs are great" 要執行不區分大小寫的替換,請在正則表達式中使用i選項: String.replace(/<TERM>/gi, '') 示例: const phrase = 'I love my dog! Dogs are great' const stripped = phrase.replace(/dog/gi, '') stripped //"I love my ! s are great" 請記住,如果字符串包含一些特殊字符,它將無法正確處理正則表達式,因此建議使用此函數將字符串進行轉義(從MDN中取得): const escapeRegExp = (string) => { return string.replace(/[.\*+?^${}()|[\]\\]/g, '\\$&') } 使用split和join 另一種解決方案,儘管比正則表達式慢,是使用兩個JavaScript函數。...

如何在 JavaScript 中使用捕獲組擷取正則表達式的所有結果

我面臨了這樣的任務 基本上,我有一個包含多個URL的字符串,我想使用正則表達式處理它們。 這個正則表達式使用了捕獲組,非常方便。 那麼,讓我們從獲取單個結果開始: const text = 'hello1 bla bla hello2' const regex = /hello\d/ text.match(regex) /* [ 'hello1', index: 0, input: 'hello1 bla bla hello2', groups: undefined ] */ 使用 g標誌可以從正則表達式中獲取多個結果,而且這是自動進行的,但現在 match() 的結果不同,只返回匹配的結果: const text = 'hello1 bla bla hello2' const regex = /hello\d/g console.log(text.match(regex)) //[ 'hello1', 'hello2' ] 使用 ES2020中的 matchAll() 方法可以獲得更詳細的結果集。 該方法返回一個迭代器對象,所以需要使用循環來遍歷結果: for (let match of text.matchAll(regex)) { console.log(match) } /* [ 'hello1', index: 0, input: 'hello1 bla bla hello2', groups: undefined ] [ 'hello2', index: 15, input: 'hello1 bla bla hello2', groups: undefined ] */ 現在讓我們談談捕獲組。...

如何在 Markdown 字串中更改圖片的 URL

最近,我試圖將我的基於 Hugo 的部落格移植到 Next.js(結果並不理想),而在這個過程中遇到了一個問題。 Hugo 允許我在圖片名稱中使用空格,這對於使用截圖並且預設檔名為 Screen Shot 2022-... 是很方便的。 但是 Next.js 的 Markdown 則不允許使用空格。因此,我撰寫了一個腳本來將所有的圖片檔名中的空格改為連字符(hyphen)。 "Screen Shot 2022-..." => "Screen-Shot-2022-..." 然後,我將文章的 Markdown 內容替換為改好的名稱。 同時,由於 Hugo 允許將文章放在與 Markdown 檔案相同的資料夾中,而 Next.js 則不允許這樣做。 因此,我使用了 /public/images/<SLUG>/ 的資料夾形式,將每個文章的圖片設為公共可見。 以下是我實現這個功能的程式碼: import matter from 'gray-matter' ... let { data: frontmatter, content } = matter(fileName) const regex = /\!\[(.*?)\]\((.*?)\)/gm let matches while ((matches = regex.exec(content)) !== null) { content = content.replace( '](' + matches[2], `](/images/${slug}/${matches[2].replace(/ /g, '-').replace(/\//g, '')}` ) }

如何在JavaScript中驗證電子郵件地址

有很多方法可以驗證電子郵件地址。學習正確的方法,並了解使用純JavaScript的所有選項。 在處理表單時,驗證電子郵件地址是常見的操作之一。 在聯繫表單、註冊和登錄表單等方面非常有用。 有些人認為根本不應該對電子郵件進行驗證。我認為少量的驗證,不要過度追求完美,是更好的選擇。 電子郵件驗證應遵循哪些規則? 電子郵件地址由兩部分組成:本地部分和域名部分。 本地部分可以包含 任何字母或數字字符:a-zA-Z0-9 標點符號:"(),:;<>@[\] 特殊字符:!#$%&'*+-/=?^_``{|}~ 點號.,如果它不是第一個或最後一個字符。而且不能重複出現。 域名部分可以包含 任何字母或數字字符:a-zA-Z0-9 橫槓-,如果它不是第一個或最後一個字符。可以重複出現。 使用正則表達式 驗證電子郵件地址的最佳選擇是使用正則表達式。 沒有一個通用的電子郵件驗證正則表達式。大家似乎都在使用不同的驗證方法,而大多數在線找到的正則表達式將無法通過最基本的電子郵件場景驗證,原因可能是不準確,或者並沒有計算新引入的域名或國際化電子郵件地址。 不要盲目使用任何正則表達式,請先檢查一下。 我在Glitch上建立了這個例子,它將檢查一個被認為有效的電子郵件地址列表是否通過正則表達式驗證。您可以更改正則表達式並將其與您想使用的其他正則表達式進行比較。 當前添加的正則表達式是我認為最準確的,稍微經過修正以解決多個點的問題。 注意:這不是我想出來的。我在一個Quora答案中找到它,但我不確定它是否是原始來源。 這是一個使用該正則表達式進行驗證的函數: const validate = (email) => { const expression = /(?!.\*\.{2})^([a-z\d!#$%&'\*+\-\/=?^\_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'\*+\-\/=?^\_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)\*|"((([ \t]\*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))\*(([ \t]\*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-.\_~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]\*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-.\_~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]\*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i; return expression.test(String(email).toLowerCase()); }; 這滿足了所有常見情況,可以假設99.9%的用戶添加的電子郵件地址都可以成功驗證。 此Glitch上的代碼包含其他可以通過重新發布該項目輕松嘗試的正則表達式。 儘管相當準確,但這個正則表達式在一些邊界情況下存在一些問題,根據您的需求,您可以忽略這些問題。 對於奇怪的地址存在假陰性,例如 "very.(),:;<>[]".VERY."very@\ "very".unusual"@strange.example.com one."more\ long"@example.website.place 對於本機地址存在假陰性,例如 [[email protected]](/cdn-cgi/l/email-protection) [[email protected]](/cdn-cgi/l/email-protection) 在公開訪問的網站上幾乎沒有用處(對於在公開訪問的網站上禁用這些地址實際上是一個優勢) 同樣,在基於IP的電子郵件上有假陽性 user@[2001: DB8 :: 1] [[email protected]](/cdn-cgi/l/email-protection) 對於本地部分過長的地址存在假陽性 12345678901234[[email protected]](/cdn-cgi/l/email-protection) 您需要一個更簡單的正則表達式嗎? 上面的正則表達式非常複雜,以至於我甚至不嘗試去理解它。正規表達式大師們創建了它,並且在互聯網上流傳開來,直到我找到它為止。 在這一點上,使用它只是一個複製/粘貼的問題。 一個更簡單的解決方案只是檢查輸入的地址是否包含某個內容,然後是 @ 符號,然後是其他內容。 在這種情況下,使用以下正則表達式即可:...