JS正則02——js正則表達式中常用的方法、常見修飾符的使用詳解以及各種方法使用情況示例

JS正則02——js正則表達式中常用的方法、常見修飾符的使用詳解以及各種方法使用情況示例

  • 1. 前言
    • 1.1 簡介
    • 1.2 js正則特殊字符即使用示例
  • 2. 創建正則表達式的方式
    • 2.1 兩種創建正則表達式的方式
    • 2.2 關于修飾符
  • 3. 正則表達式中常用的方法
    • 3.1 test() 方法——正則表達式對象的方法
    • 3.2 search()方法——字符串對象的方法
    • 3.3 replace()方法——字符串對象的方法
      • 3.3.1 語法
      • 3.3.2 例子
        • 3.3.2.1 不使用正則例子
        • 3.3.2.2 使用正則例子
    • 3.4 split()方法——字符串對象的方法
      • 3.4.1 語法
      • 3.4.2 例子
    • 3.5 match()方法——字符串對象的方法
      • 3.5.1 關于match()方法
      • 3.5.2 match()的例子
    • 3.6 exec()方法——正則表達式對象的方法
  • 4. 關于特定字符`()`——分組 + 捕獲
    • 4.1 描述
    • 4.2 示例
  • 5. 總結關于常見修飾符的使用
  • 6. 參考

1. 前言

1.1 簡介

  • JavaScript正則表達式是一種強大的工具，用于在字符串中匹配和操作文本。它可以用來驗證輸入的格式、提取特定的文本、替換文本等。

1.2 js正則特殊字符即使用示例

  • 可以看上篇文章，如下
    JS正則01——JS正則表達式中各元字符的詳細介紹以及常用的js正則示例.

2. 創建正則表達式的方式

2.1 兩種創建正則表達式的方式

  • 使用字面量創建：

    • 語法如下：
      var regex = /pattern/modifiers;   // 修飾符 modifiers 可以省略
    • 舉例如下：
      var regex = /hello/;   // 匹配包含"hello"的字符串var regex_2 = /^hello$/;   //嚴格匹配，只能匹配"hello"字符串var regex_3 = /^hello$/i;  //只能匹配"hello"字符串，但不區分大小寫匹配

  • 使用構造函數創建：

    • 語法如下：
      var regex = new RegExp("pattern");或var regex = new RegExp("pattern","modifiers");
    • 舉例如下：
      var value = "hEllo";var regex = new RegExp("hello");   // 匹配包含"hello"的字符串
var regex_2 = new RegExp("^hello$");   // 嚴格匹配，只能匹配"hello"字符串
var regex_3 = new RegExp("^hello$","i");  //只能匹配"hello"字符串，但不區分大小寫匹配alert( regex.test(value) ); // true-匹配成功   false-匹配失敗

2.2 關于修飾符

  • 常用的JavaScript正則表達式修飾符如下：
    • i：不區分大小寫（在匹配時忽略大小寫）。
    • g：全局匹配（查找所有匹配項，而不僅僅是第一個）。
    • m：多行匹配，將開始和結束字符（^和$）視為多行的開始和結束，而不僅僅是整個字符串的開始和結束。
    • s：單行匹配，使點（.）元字符匹配包括換行符在內的任何字符。
    • u：Unicode匹配（啟用完整的Unicode匹配模式，將模式視為由Unicode代碼點組成的序列）。
    • y：粘性匹配（只從目標字符串的當前位置開始匹配）。
  • 關于使用例子，下面我們會介紹，請繼續……

3. 正則表達式中常用的方法

3.1 test() 方法——正則表達式對象的方法

  • test()：
    • 用于檢測字符串是否匹配正則表達式。返回值為布爾值，如果匹配成功則返回true，否則返回false。
    • 如果只需判斷字符串是否匹配正則表達式，可以使用該test()方法。
  • 上面《2.1 兩種創建正則表達式的方式》中以及上篇文章都是用 test() 方法說的示例，所以此處不再介紹。

3.2 search()方法——字符串對象的方法

  • search()：
    用于在字符串中查找與正則表達式匹配的第一個位置。返回匹配到的位置索引。如果沒有匹配到，則返回 -1。
  • 例子：
    var value = "abc-hello-123";
var regex = /hello/; alert( value.search(regex) ); // 返回4 （注意：search() 是字符串的方法，并且字符串的index從0開始）

    var value = "abc-hello-123";
var regex = /^hello$/; alert( value.search(regex) ); // 返回-1（因為同時使用 ^和$ 時是嚴格匹配）

3.3 replace()方法——字符串對象的方法

3.3.1 語法

  • replace()：
    • JavaScript中的正則表達式replace()方法用于在字符串中替換匹配的文本。
    • 語法：
      string.replace(regexp|substr, newSubstr|function)
      • regexp|substr：可以是一個正則表達式或者一個要被替換的子字符串。
      • newSubstr|function：可以是一個新的字符串或者一個用于替換的函數。
      • 如果第一個參數是一個正則表達式，replace()方法將會替換所有匹配的文本。如果第一個參數是一個字符串，replace()方法只會替換第一個匹配的文本。

3.3.2 例子

3.3.2.1 不使用正則例子
  • 如下：
    var value = "abc-hello-123-hello-567";alert( value.replace("hello","good") ); // 返回 abc-good-123-hello-567（非正則表達式時：只替換第一個匹配的文本）
3.3.2.2 使用正則例子
  • 例子1——第二個參數是新字符串：
    var value = "abc-hello-123-hello-567";
var regex = /hello/; alert( value.replace(regex,"good") ); // 返回 abc-good-123-hello-567（只替換第一個hello）

    var value = "abc-hello-123-hello-567";
var regex = /hello/g; alert( value.replace(regex,"good") ); // 返回 abc-good-123-good-567（使用 g 可以全局替換，不只是替換第一個）
  • 例子2——第二個參數是函數：
    var value = "abc-hello-123";
var regex = /hello/; var newValue = value.replace(regex, function(str) {return str.toUpperCase();
});alert(newValue);  // 返回：abc-HELLO-123

3.4 split()方法——字符串對象的方法

3.4.1 語法

  • JavaScript中的正則表達式split()方法用于將字符串分割成數組，根據指定的正則表達式模式進行分割。
  • 語法：
    str.split(regexp|separators)

3.4.2 例子

  • 例子1——使用一般分隔符分割，不使用正則表達式
    var value = "apple;banana;orange";console.log(value.split(";"));  //輸出： ['apple', 'banana', 'orange']
  • 例子2——使用正則表達式
    var value = "I-123-love-456-you";var regex = /[-]\d+[-]/; console.log(value.split(regex));  //輸出： ['I', 'love', 'you']

3.5 match()方法——字符串對象的方法

3.5.1 關于match()方法

  • 關于match()方法
    • 通過調用該方法可以在字符串中查找匹配的內容。
    • 如果 regexp 沒有標記 g，那么它會以數組形式返回第一個匹配結果，數組中包含捕獲組和屬性 index（匹配位置）、input（輸入字符串，等于 str）：。
    • 如果正則表達式具有全局標志（g），match()方法將返回一個數組，包含所有匹配到的內容。
    • 如果沒有找到匹配項，則返回null。
  • 語法：
    str.match(regexp)

3.5.2 match()的例子

  • 例子1——：不使用全局匹配（g）
    var value = "abc-hello-123-hello-567";var regex = /hello/;var result = value.match(regex);  // 匹配結果var match = result[0]; // 匹配到的字符串
var index = result.index; // 匹配到的字符串在原始字符串中的索引位置(第一個位置)console.log(result); // 輸出匹配到的字符和其他信息
console.log(result=="hello"); // 輸出true
console.log(match);  // 輸出 hello
console.log(index);  // 輸出 4
    在這里插入圖片描述
  • 例子2——：使用全局匹配（g）
    var value = "abc-hello-123-hello-567";var regex = /hello/g;  // 使用 g 可以全局替換，不只是替換第一個var result = value.match(regex);  // 匹配結果console.log(result); // 輸出匹配結果數組：['hello', 'hello']
    在這里插入圖片描述

3.6 exec()方法——正則表達式對象的方法

  • 關于exec()方法
    • exec()是 JavaScript 正則表達式對象的一個方法，用于在字符串中執行匹配操作。
    • exec()方法返回一個數組，包含匹配到的內容以及其他相關信息，如果沒有找到匹配項，則返回null。
    • exec()方法好像不支持全局匹配，只能匹配第一個，設置了 g 不生效！
  • 例子：
    var value = "abc-hello-123-hello-567";var regex = /hello/;var result = regex.exec(value);  // 匹配結果var match = result[0]; // 匹配到的字符串
var index = result.index; // 匹配到的字符串在原始字符串中的索引位置console.log(result);
console.log(match);  // 輸出 hello
console.log(index);  // 輸出 4
    在這里插入圖片描述

4. 關于特定字符()——分組 + 捕獲

4.1 描述

  • ()括號在正則表達式中有特殊的含義，用于分組和捕獲匹配的內容。
    • 分組：
      ()可以將多個字符組合成一個單元，形成一個子表達式。例如，/(ab)+/可以匹配連續出現的"ab"字符串，如"abab"、"ababab"等。
    • 捕獲：
      ()還可以用于捕獲匹配的內容，以便后續使用。捕獲的內容可以通過$1、$2等變量進行引用。例如，/(\d{4})-(\d{2})-(\d{2})/ 可以匹配日期格式，同時將 年、月、日分別捕獲到 $1、$2、$3 中。

4.2 示例

  • 分組示例：
    • /(abc)+/：匹配連續出現的"abc"字符串，如"abcabc"、"abcabcabc"等
    • 更多示例也可以看上篇文章的例子，好多用到了分組：
      JS正則01——JS正則表達式中各元字符的詳細介紹以及常用的js正則示例.
  • 捕獲示例：
    • 示例1：匹配日期格式，如"2022-12-29"，并將年、月、日分別捕獲到$1、$2、$3中。
      let str_0 = "2022-12-29";var regex_0 = /(\d{4})-(\d{2})-(\d{2})/;let result_0 = str_0.match(regex_0); //匹配結果console.log(result_0);console.log(result_0[0]); // 輸出 2022-01-01（匹配到的字符串）console.log(result_0[1]); // 輸出 2022（捕獲到的）
console.log(result_0[2]); // 輸出 12（捕獲到的）
console.log(result_0[3]); // 輸出 29（捕獲到的）
      在這里插入圖片描述
    • 示例2：
      let str = "I love JavaScript";// var regex = /JavaScript/;
var regex = /Java(Script)/;
let result = str.match(regex);console.log(result); console.log( result[0] );     // 輸出 匹配結果：JavaScript (full match)
console.log( result[1] );     // 輸出 捕獲組：Script (first capturing group)
console.log( result.length ); // 2// Additional information:
console.log( result.index );  // 7 (match position)
console.log( result.input );  // I love JavaScript (source string)
      在這里插入圖片描述

5. 總結關于常見修飾符的使用

  • i：不區分大小寫匹配
    var value = "HeLLo";var regex = /^hello$/i; 
// var regex = new RegExp("^hello$","i");  // 使用構造函數創建方式alert(regex.test(value));
  • g: 全局匹配（查找所有匹配項，而不僅僅是第一個）。
    這個參考上面寫的《3.5.2 match()的例子》中的例2，已經使用了這個修飾符，所以此處不介紹了。
  • g和i結合
    var value = "HeLLo-1-aa-hello-b-hEllo";// 下面兩種正則方式均可以
var regex = /hello/gi;  // 既全局匹配 又 忽略大小寫匹配
var regex_2 = new RegExp("hello","gi");  var result = value.match(regex);console.log(result); // 輸出： ['HeLLo', 'hello', 'hEllo']
    在這里插入圖片描述

6. 參考

  • 如下：
    https://javascript.info/regexp-methods.

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/711911.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/711911.shtml
英文地址，請注明出處：http://en.pswp.cn/news/711911.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Vue之監測數據的原理（對象）

Vue之監測數據的原理（對象）

大家有沒有想過，為什么vue可以監測到數據發生改變？其實底層借助了Object.defineProperty，底層有一個Observer的構造函數 讓我為大家簡單的介紹一下吧！ 我用對象為大家演示一下 const vm new Vue({el: "#app",data: {ob…
閱讀更多...
Python列表操作函數

Python列表操作函數

在Python中，列表（list）是一種可變的數據類型，它包含一系列有序的元素。Python提供了一系列內置的函數和方法來操作列表。以下是一些常用的Python列表操作函數和方法： 列表方法 append(x) 將元素x添加到列表的末尾。 …
閱讀更多...
文獻速遞：帕金森的疾病分享--多模態機器學習預測帕金森病

文獻速遞：帕金森的疾病分享--多模態機器學習預測帕金森病

文獻速遞：帕金森的疾病分享–多模態機器學習預測帕金森病 Title 題目 Multi-modality machine learning predicting Parkinson’s disease 多模態機器學習預測帕金森病 01 文獻速遞介紹 對于漸進性神經退行性疾病，早期和準確的診斷是有效開發和使…
閱讀更多...
Linux按鍵輸入實驗-對按鍵驅動進行測試

Linux按鍵輸入實驗-對按鍵驅動進行測試

一. 簡介 前面學習在設備樹文件中創建按鍵的設備節點，并實現對按鍵驅動代碼的編寫，文章地址如下：Linux按鍵輸入實驗-創建按鍵的設備節點-CSDN博客Linux按鍵輸入實驗-按鍵的字符設備驅動代碼框架-CSDN博客Linux按鍵輸入實驗-按鍵的GPIO初始化-CSDN博客 本文對所實現的按鍵驅…
閱讀更多...
【精品】集合list去重

【精品】集合list去重

示例一&#xff1a;對于簡單類型&#xff0c;比如String public static void main(String[] args) {List<String> list new ArrayList< >();list.add("aaa");list.add("bbb");list.add("bbb");list.add("ccc");list.add(…
閱讀更多...
網絡工程師必備的網絡端口大全（建議收藏）

網絡工程師必備的網絡端口大全（建議收藏）

端口是一種數字標識&#xff0c;用于在計算機網絡中進行通信&#xff0c;你完全可以把端口簡單的理解為是計算機和外界通訊交流的出口。但在網絡技術中&#xff0c;端口一般有兩種含義&#xff1a; &#xff08;1&#xff09;硬件設備中的端口 如交換機、路由器中用于鏈接其他…
閱讀更多...
用stream流將list轉為map

用stream流將list轉為map

用stream流將list轉為map 1、將list轉為Map<Long, List> 按照spaceId分組&#xff0c;spaceId相同的為一組數據&#xff1a; List<BasEvaluationPriceResultDto> list new ArrayList(); Map<Long, List<BasEvaluationPriceResultDto>> priceResult…
閱讀更多...
“金三銀四”招聘季，大廠爭招鴻蒙人才

“金三銀四”招聘季，大廠爭招鴻蒙人才

在金三銀四的招聘季中&#xff0c;各大知名互聯網企業紛紛加入了對鴻蒙人才的爭奪戰。近日&#xff0c;包括淘寶、京東、得物等在內的知名APP均宣布啟動鴻蒙星河版原生應用開發計劃。這一舉措不僅彰顯了鴻蒙生態系統的迅猛發展&#xff0c;還催生了人才市場的繁榮景象。據數據顯…
閱讀更多...
遙感影像處理（ENVI+ChatGPT+python+ GEE）處理高光譜及多光譜遙感數據

遙感影像處理（ENVI+ChatGPT+python+ GEE）處理高光譜及多光譜遙感數據

遙感技術主要通過衛星和飛機從遠處觀察和測量我們的環境&#xff0c;是理解和監測地球物理、化學和生物系統的基石。ChatGPT是由OpenAI開發的最先進的語言模型&#xff0c;在理解和生成人類語言方面表現出了非凡的能力。本文重點介紹ChatGPT在遙感中的應用&#xff0c;人工智能…
閱讀更多...
vue3學習 【4】ref和reactive的使用并于ts結合

vue3學習 【4】ref和reactive的使用并于ts結合

使用ref聲明一個響應式對象并使用 <script lang"ts" setup> import { ref } from vue; const message ref("HelloWorld") message.value"被修改了啊~~" </script> <template>{{ message }} </template>ref() 接收參數…
閱讀更多...
Vue——攜帶參數跳轉路由

Vue——攜帶參數跳轉路由

Vue學習之——跳轉路由 前情回顧 當我們進行點擊修改時&#xff0c;會進行跳轉到修改頁面&#xff0c;為了完成回顯數據&#xff08;根據對應id查找&#xff09;&#xff0c;我們需要攜帶對應選擇中的id跳轉到修改頁面&#xff0c;讓其進行查找回顯 學習useRoute和useRoute…
閱讀更多...
webstorm2023.3.4安裝與破解

webstorm2023.3.4安裝與破解

WebStorm安裝步驟 打開JetBrains官方網站&#xff08;https://www.jetbrains.com/webstorm/&#xff09; 運行.exe 選擇安裝路徑 第一個意思是是否創建桌面快捷方式&#xff0c;可根據需要選擇&#xff1b;第二個.js .css .html勾選后之后js css html文件默認會用webstor…
閱讀更多...
AI Agent

AI Agent

目錄 一、什么是Agent 二、什么是MetaGPT【多智能體框架介紹】 三、MetaGPT的背景 一、什么是Agent 智能體 LLM觀察思考行動記憶 Agent&#xff08;智能體&#xff09; 一個設置了一些目標或任務&#xff0c;可以迭代運行的大型語言模型。這與大型語言模型&#xff08;LLM&am…
閱讀更多...
985機械研一轉碼，java還是c++？

985機械研一轉碼，java還是c++？

985機械研一轉碼&#xff0c;java還是c&#xff1f; 在開始前我分享下我的經歷&#xff0c;我剛入行時遇到一個好公司和師父&#xff0c;給了我機會&#xff0c;一年時間從3k薪資漲到18k的&#xff0c; 我師父給了一些 電氣工程師學習方法和資料&#xff0c;讓我不斷提升自己&…
閱讀更多...
一鍵下載電路(for STM32 and mcuisp)

一鍵下載電路(for STM32 and mcuisp)

一鍵下載電路 1. STM32 一鍵下載電路2. 燒錄軟件&#xff1a;mcuisp和FlyMcu下載3. 遇到問題 1. STM32 一鍵下載電路 博文連接 2. 燒錄軟件&#xff1a;mcuisp和FlyMcu下載 mcuisp和FlyMcu下載 3. 遇到問題 按如上博文電路設計&#xff0c;上電發現程序沒有進入 main() 函…
閱讀更多...
【OpenGL的著色器03】內置變量（gl_Position等）

【OpenGL的著色器03】內置變量（gl_Position等）

目錄 一、說明 二、著色器的變量 2.1 著色器變量 2.2 著色器內置變量 三、最常見內置變量使用范例 3.1 常見著色器變量 3.2 示例1&#xff1a; gl_PointSize 3.3 示例2&#xff1a;gl_Position 3.4 gl_FragColor 3.5 渲染點片元坐標gl_PointCoord 3.6 gl_PointCoo…
閱讀更多...
【PyTorch][chapter 20][李宏毅深度學習]【無監督學習][ GAN]【實戰】

【PyTorch][chapter 20][李宏毅深度學習]【無監督學習][ GAN]【實戰】

前言 本篇主要是結合手寫數字例子,結合PyTorch 介紹一下Gan 實戰 第一輪訓練效果 第20輪訓練效果,已經可以生成數字了 68 輪 目錄&#xff1a; 谷歌云服務器&#xff08;Google Colab&#xff09; 整體訓練流程 Python 代碼 一 谷歌云服務器&#xff08;Google Colab&…
閱讀更多...
Linux學習-字符串數組和字符串

Linux學習-字符串數組和字符串

目錄 使用場景 字符型數組定義&#xff1a; 初始化 數組儲存 打印 字符型數組常見函數 常見操作 strcpy&#xff1a;字符串拷貝 strcat&#xff08;str1&#xff0c;str2&#xff09;字符串拼接 strcmp&#xff1a;字符串比較 注意&#xff1a; 二維字符型數…
閱讀更多...
Open CASCADE學習|曲線曲面連續性

Open CASCADE學習|曲線曲面連續性

1、曲線的連續性 曲線的連續性是三維建模、動畫設計等領域中非常重要的一個概念&#xff0c;它涉及到曲線在不同點之間的連接方式和光滑程度。下面將詳細介紹曲線的連續性&#xff0c;包括C連續性和G連續性。 1.1C連續性&#xff08;參數連續性&#xff09; C連續性是指曲線…
閱讀更多...
使用MyBatisPlus實現向數據庫中存儲List類型的數據

使用MyBatisPlus實現向數據庫中存儲List類型的數據

使用MyBatisPlus實現向數據庫中存儲List類型的數據 問題描述 建表時&#xff0c;表中的這五個字段為json類型 但是在入庫的時候既不能寫入數據&#xff0c;也不能查詢出數據。 解決方案&#xff1a; 1.首先明確&#xff0c;數據存入的時候是經過了數據類型轉化&#xff0c…
閱讀更多...
最新文章

Copyright @ 2022~2023