JavaScript >> Javascript 文檔 >  >> Tags >> regex

檢查/驗證字符串匹配 JavaScript 中的正則表達式 [示例]

本文將向您展示如何使用正則表達式 (Regex) 來驗證 JavaScript 中的匹配字符串。

應驗證在您的應用程序中收集的所有用戶輸入。如果需要電子郵件地址,則應輸入有效的電子郵件地址,否則發送電子郵件將失敗。如果需要電話號碼,則必須輸入有效的電話號碼,依此類推。通過將整個字符串與指定格式匹配,可以使用正則表達式進行此驗證。

正則表達式也可用於在字符串中搜索文本,進行部分匹配,使其對查找/替換或搜索操作很有用。

然而,正如您將在下面看到的,正則表達式可能很難編寫。有時使用別人的正則表達式或使用軟件生成所需的表達式更有意義。

正則表達式(正則表達式)

正則表達式 (Regex) 是一種標準,通過該標準可以搜索文本以查找匹配的搜索模式。正則表達式本身是定義一組規則或搜索模式的字符序列 與哪個文本匹配。

正則表達式可用於匹配字符串的全部或部分。通過匹配整個字符串,它可以用來驗證用戶輸入。通過匹配字符串的各個部分,可用於確認字符串是否包含子字符串,或者用於在字符串中搜索特定值並找到搜索目標出現的位置。

JavaScript 中的正則表達式 - 它是如何工作的

要在 JavaScript 中使用正則表達式,您只需定義要匹配的正則表達式模式,然後將其傳遞給內置的正則表達式方法之一,以查看搜索模式是否被 all 或字符串的一部分。

正則表達式是什麼樣的?

正則表達式非常複雜。驗證電子郵件地址的正則表達式如下所示:

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

是的,就是這麼複雜 .因此,在您使用正則表達式之前,請認真考慮您是否需要 使用正則表達式。通常有更簡單的方法來實現相同的目標 - 例如,許多用於搜索和替換文本的字符串方法,它們接受正則表達式作為參數,將接受一個簡單的字符串,這可能足以滿足您的用例。

鏈接這些方法來執行多個替換也可能更容易編碼——也更容易閱讀。

還有其他方法可以驗證和檢查輸入,例如使用正確的 HTML 輸入類型。您可以使用電子郵件類型輸入字段,而不是使用正則表達式驗證電子郵件——它可以由網絡瀏覽器驗證,作為防止錯誤輸入的初始保護。 提交數據後,還應在後端檢查在前端執行的任何驗證。

編寫/生成正則表達式搜索模式

Regex 寫起來很痛苦。似乎沒有人喜歡使用正則表達式。儘管從編寫正則表達式中獲得了一些滿足感,但它通常被認為是一種挫折練習,並且容易出錯——如果正則表達式的行為不符合預期,這可能會對生產應用程序產生不利影響。

規則和語法很難掌握,所以初學者經常遇到困難。

使用正則表達式生成器通常比手動編寫自己的搜索模式更明智。它會在早期階段為您節省時間,並且如果您決定開始編寫自己的正則表達式,您將能夠看到有效的正則表達式並從中學習。

此外,對於常見用例,在線論壇為預先編寫的正則表達式搜索模式提供了很好的資源,例如電子郵件地址、電話號碼、郵政編碼等——只需在互聯網上搜索正則表達式模式你想要,你可能會發現其他人已經為它寫了一個模式。

在 JavaScript 中定義正則表達式

RegExp 對像用於在 JavaScript 中存儲正則表達式。聲明 RegExp 對象的語法如下:

var myRegExp = new RegExp('EXPRESSION');

請注意,表達式 這將是您希望驗證字符串的正則表達式。

您也可以將正則表達式定義為表達式文字:

var myRegExp = /EXPRESSION/;

但是,這不是首選方法,因為它更難閱讀,並且表達式一旦創建就無法修改。在閱讀和調試代碼時,使用 RegExp 對象的目的不那麼明確。使用 RegExp 對像還意味著您可以將表達式存儲為字符串並將它們傳遞給構造函數,從而增加靈活性。

通過使用 RegExp 對象,表達式可以作為字符串存儲在文件或數據庫中,允許您維護表達式列表以供重複使用。

在 JavaScript 中使用正則表達式

下面是正則表達式和字符串方法,它們可以與正則表達式一起使用來搜索和操作字符串,每個都有一個代碼示例。

每個示例中使用的正則表達式都故意簡單,以便您可以看到函數本身是如何使用的。

使用 exec() 搜索匹配項

RegExp.exec() 方法在給定字符串中搜索匹配項,返回一個數組或 null 如果沒有結果:

var myRegEx = RegExp('red');
var myString = 'blue green red purple';
console.log(myRegEx.exec(myString));

以上,我們在字符串中搜索‘red’,並記錄結果。

使用 test() 測試完全匹配

RegExp.test() 方法測試給定字符串中的匹配項,返回 TRUE 或 FALSE:

var myString = 'blue green red purple';
var myRegEx = new RegExp('red', 'g');
console.log(myRegEx.test(myString));

注意‘g’的使用 初始化 RegExp 對象時的標誌——這告訴正則表達式對字符串進行全局搜索。

使用 match() 查找所有匹配項 和 matchAll()

String.match() 方法返回給定正則表達式字符串中所有匹配項的數組。下面的示例查找字符串中的所有大寫字母:

var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('[A-Z]', 'g');
console.log(myString.match(myRegEx));

String.matchAll() 方法做同樣的事情,但返回一個 迭代器

var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('[A-Z]', 'g');

console.log([...myString.matchAll(myRegEx)]);

注意使用擴展語法將可迭代擴展為數組,以便可以使用 console.log() 打印 .

使用 search() 測試字符串中的匹配項

String.search() 方法返回字符串中正則表達式匹配的索引,或 -1 如果沒有找到:

var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';

var myRegEx = new RegExp('quick', 'g');

console.log(myString.search(myRegEx));

replace() 替換文本

String.replace() 方法將替換字符串中的第一個匹配項。原始字符串不會被更改,因此如果要使用結果必須將結果分配給新變量:

var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';

var myRegEx = new RegExp('Hawaii', 'g');

console.log(myString.replace(myRegEx, 'New York'));

請注意,如果將字符串作為搜索詞而不是 RegExp 對像傳遞,則只會替換找到的第一個匹配項!

replaceAll() 替換所有匹配項

String.replaceAll() 方法將替換字符串中出現的所有匹配項——無論是使用正則表達式還是字符串來定義搜索詞:

var myString = 'The quick brown fox jumps over the lazy dog and ignores the other dog';

var myRegEx = new RegExp('dog', 'g');

console.log(myString.replaceAll(myRegEx, 'cat'));

使用 split() 將字符串拆分為子字符串

String.split() 方法在給定點拆分字符串,可以使用 Regex 確定:

var myString = '1 dog, 4 parrots, 6 pigs';

var myRegEx = new RegExp('(,)');

console.log(myString.split(myRegEx));

以上,字符串以逗號分隔。請注意正則表達式中括號的使用——這意味著匹配項將包含在結果中,而它們通常會被 String.split() 省略 .

更簡單的方法?

如果您使用正則表達式驗證輸入,並驗證標準化格式(如電子郵件地址和 URL),請考慮改用驗證庫。所有繁重的工作都為您完成,您只需將數據傳遞到庫中,它就會讓您知道數據的格式是否正確。

如果您正在搜索從用戶輸入、文件或數據庫中收集的文本,那麼也存在比依賴正則表達式更易於使用且功能更強大的庫。一些庫允許您搜索完全匹配或模糊匹配,從而使您能夠執行更廣泛和用戶友好的搜索。

這並不是說應該不惜一切代價避免使用正則表達式——當你需要它們的時候,你就需要它們——而且必要性、複雜性和實現很大程度上取決於你想要做什麼構建。


下一篇
No
Tutorial JavaScript 教程
  1. uncss:查找未使用的 CSS

  2. 在 JavaScript 中對數字對象使用 toLocaleString

  3. 新的 Vaadin、Angular 和 React 比較工具

  4. ReactJS 中的 CSS 模塊

  5. 我做了一個小米手機計算器的克隆

  6. 如何檢查一個鍵是否存在於 JavaScript 對像中

  7. 從 Github Actions 將 Angular 應用程序部署到 Azure

  1. JavaScript 面試題 — 對象

  2. 我們是博格人

  3. 搜索插入位置 — JS(第 9 天)

  4. 如何在 Vue Storefront 2 中啟用緩存

  5. 使用 Apollo 客戶端進行本地狀態管理

  6. 如何使用 NEXTJS 和 Tailwind CSS(如 STRIPE.COM)創建漂亮的導航欄。

  7. 在項目中添加 react-to-print

  1. 使用 Next.js、Tailwind、tRPC 和 Prisma ORM 構建全棧應用程序

  2. next-export-i18n v1.2.1:帶有 Next.js 和 Mustache 的 i18n

  3. 第一個 UI 套件將 Bootstrap 5 與 Angular、React 和 Vue 集成

  4. 介紹 LearnStorybook.com