Javascriptで正規表現を使用する方法-jsチュートリアル-php.cn

正規表現は人々の頭の中では理解できない文字の集まりであるかもしれませんが、文字列に対する効率的な操作を可能にするのはこれらの記号です。正規表現 (正規表現) は、単純な言語の文法仕様であり、文字列内の情報の検索、置換、抽出操作を実装するためにいくつかのメソッドで使用されます。問題自体は複雑ではありませんが、正規表現がないと大きな問題になります。 JavaScript の正規表現は非常に重要な知識です。この記事では、正規表現の基本的な構文を紹介します。

定義

正規表現 (正規表現) は、単純な言語の文法仕様であり、文字列内の情報の検索、置換、置換を実現するための強力で便利かつ効率的なテキスト処理ツールです。抽出操作

JavaScript の正規表現は RegExp オブジェクトによって表されます。1 つはリテラル記述で、もう 1 つはコンストラクター記述です。JavaScript では正規表現が使用される場所が数多くあります。この記事では、正規表現の基礎知識とJavaScriptでの正規表現の使い方についてまとめました。

最初のパートでは JavaScript における正規表現の使用シナリオを簡単にリストし、後半では正規表現の基礎知識を詳しく紹介し、理解しやすいようにいくつかの例を書きます。

この記事の内容は、Rhino書籍の正規表現の書き方とjs正規表現の章を読んで私なりにまとめたものですので、内容に漏れや不正確な点がある可能性があります。通りすがりの専門家が記事の間違いを発見した場合は、修正してください。

JavaScript における正規表現の使用

正規表現は、文字の断片の特徴的な記述と考えることができ、その機能は、文字列の束の中から条件を満たす部分文字列を見つけることです。たとえば、JavaScript で正規表現を定義します。

var reg=/hello/  或者 var reg=new RegExp("hello")

ログイン後にコピー

この正規表現を使用して、一連の文字列から hello という単語を検索できます。「検索」アクションの結果は、最初の hello の位置の検索、hello の別の文字列への置き換え、すべての hello の検索などになります。以下に JavaScript で正規表現を使用できる関数のリストを示します。これらの関数の機能については、後半でさらに複雑な使用法を紹介します。

String.prototype.searchメソッド

は、元の文字列内で最初に出現する部分文字列のインデックスを見つけるために使用され、そうでない場合は、-1を返します

"abchello".search(/hello/); // 3

ログイン後にコピー

String.prototype.replaceメソッド

。文字の置換に使用されます文字列内の部分文字列

"abchello".replace(/hello/,"hi");  // "abchi"

ログイン後にコピー

String.prototype.splitメソッド

は、文字列を分割するために使用されます

"abchelloasdasdhelloasd".split(/hello/); //["abc", "asdasd", "asd"]

ログイン後にコピー

String.prototype.matchメソッド

は、部分文字列をキャプチャするために使用されます文字列から配列へ。デフォルトでは、1 つの結果のみが配列にキャプチャされます。正規表現に「グローバルキャプチャ」属性がある場合 (正規表現を定義するときにパラメーター g を追加します)、すべての結果が配列

"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]

ログイン後にコピー

にキャプチャされます。 match パラメータ match メソッドは、正規表現にグローバル属性があるかどうかに応じて動作が異なります。これについては、正規表現のグループ化で後述します。

RegExp.prototype.testメソッド

は、文字列に部分文字列が含まれているかどうかをテストするために使用されます

/hello/.test("abchello"); // true

ログイン後にコピー

RegExp.prototype.execメソッド

は、文字列のmatchメソッドと同様です。このメソッドも文字列から抽出します。条件を満たす文字列を配列に取り込みますが、2 つの違いがあります。

1. exec メソッドは、正規表現にグローバル属性があるかどうかに関係なく、一度に部分文字列のみを配列にキャプチャできます。

var reg=/hello/g;
reg.exec("abchelloasdasdhelloasd");  // ["hello"]

ログイン後にコピー

2. 正規表現オブジェクト (つまり、JavaScript の RegExp オブジェクト) lastIndex 属性は、次回キャプチャを開始する位置を示すために使用されます。 exec メソッドが実行されるたびに、一致する文字が見つからず null が返されるまで lastIndex がプッシュバックされ、その後キャプチャが最初から開始されます。。このプロパティは、キャプチャされた文字列内の部分文字列を反復処理するために使用できます。

var reg=/hello/g;
reg.lastIndex; //0
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //8
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //19
reg.exec("abchelloasdasdhelloasd"); // null
reg.lastIndex; //0

ログイン後にコピー

正規表現の基本

メタ文字

上記の最初のセクションでは /hello/ を例に挙げていますが、実際のアプリケーションでは次のようなニーズに遭遇する可能性があります: 不確実な数値の文字列と一致する、開始位置と一致する、一致が終了する位置、および一致する空白文字。ここでメタキャラクターを使用できます。

メタキャラクター:

//匹配数字: \d
"ad3ad2ad".match(/\d/g); // ["3", "2"]
//匹配除换行符以外的任意字符: .
"a\nb\rc".match(/./g); // ["a", "b", "c"]
//匹配字母或数字或下划线 ： \w
"a5_ 汉字@!-=".match(/\w/g); // ["a", "5", "_"]
//匹配空白符:\s
"\n \r".match(/\s/g); //[" ", " ", ""] 第一个结果是\n，最后一个结果是\r
//匹配【单词开始或结束】的位置 ： \b
"how are you".match(/\b\w/g); //["h", "a", "y"] 
// 匹配【字符串开始和结束】的位置: 开始 ^ 结束 $
"how are you".match(/^\w/g); // ["h"]

ログイン後にコピー

反意語のメタキャラクター。たとえば、上記の小文字を大文字に変更して記述され、数字ではないすべての文字に一致します: D

繰り返しを表すために使用されるメタキャラクターもいくつかあります。以下の内容で。

文字範囲

文字範囲を表すには、[]内の記号 - を使用します。例:

// 匹配字母 a-z 之间所有字母
/[a-z]/
// 匹配Unicode中 数字 0 到 字母 z 之间的所有字符
/[0-z]/ 
// unicode编码查询地址：
//https://en.wikibooks.org/wiki/Unicode/Character_reference/0000-0FFF
//根据上面的内容，我们可以找出汉字的Unicode编码范围是 \u4E00 到 \u9FA5，所以我们可以写一个正则表达式来判断一个字符串中是否有汉字
/[\u4E00-\u9FA5]/.test("测试"); // true

ログイン後にコピー

繰り返しと貪欲と怠惰

まず、繰り返しについて話しましょう。繰り返しのある文字を一致させたい場合、繰り返しに関連するいくつかの正規表現を使用する必要があります。

//重复n次 {n}
"test12".match(/test\d{3}/); // null
"test123".match(/test\d{3}/); // ["test123"]
//重复n次或更多次 {n,}
"test123".match(/test\d{3,}/); // ["test123"]
//重复n到m次
"test12".match(/test\d{3,5}/); // null
"test12345".match(/test\d{3,5}/); // ["test12345"]
"test12345678".match(/test\d{3,5}/); // ["test12345"]
// 匹配字符test后边跟着数字，数字重复0次或多次
"test".match(/test\d*/); // ["test"]
"test123".match(/test\d*/); // ["test123"]
//重复一次或多次
"test".match(/test\d+/) ; // null
"test1".match(/test\d*/); //["test1"]
//重复一次或0次
"test".match(/test\d?/) ; // null
"test1".match(/test\d?/); //["test1"]

ログイン後にコピー

上記の結果から、文字テストに続く数値が 0 回以上繰り返される場合、正規表現で取得された部分文字列は可能な限り多くの数値を返すことがわかります (例: /testd*)。 / は test123 と一致しますが、返されるのは test や test12 ではなく test123 です。

正则表达式捕获字符串时，在满足条件的情况下捕获尽可能多的字符串，这就是所谓的“贪婪模式”。

对应的”懒惰模式“，就是在满足条件的情况下捕获尽可能少的字符串，使用懒惰模式的方法，就是在字符重复标识后面加上一个 "?"，写法如下

// 数字重复3~5次，满足条件的情况下返回尽可能少的数字
"test12345".match(/test\d{3,5}?/); //["test123"]
// 数字重复1次或更多，满足条件的情况下只返回一个数字
"test12345".match(/test\d+?/); // ["test1"]

ログイン後にコピー

字符转义

在正则表达式中元字符是有特殊的含义的，当我们要匹配元字符本身时，就需要用到字符转义，比如：

/\./.test("."); // true

分组 & 分支条件

正则表达式可以用 " () " 来进行分组，具有分组的正则表达式除了正则表达式整体会匹配子字符串外，分组中的正则表达式片段也会匹配字符串。

分组按照嵌套关系和前后关系，每个分组会分配得到一个数字组号，在一些场景中可以用组号来使用分组。

在 replace、match、exec函数中，分组都能体现不同的功能。

replace函数中，第二个参数里边可以用 $+数字组号来指代第几个分组的内容，如：

" the best language in the world is java ".replace(/(java)/,"$1script"); // " the best language in the world is javascript "
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js" (\/\w+)分组匹配的就是 /index ，

在第二个参数中为其添加上版本号

match函数中，当正则表达式有全局属性时，会捕获所有满足正则表达式的子字符串

"abchellodefhellog".match(/h(ell)o/g); //["hello", "hello"]

ログイン後にコピー

但是当正则表达式没有全局属性，且正则表达式中有分组的时候，match函数只会返回整个正则表达式匹配的第一个结果，同时会将分组匹配到的字符串也放入结果数组中：

"abchellodefhellog".match(/h(ell)o/); //["hello", "ell"]
// 我们可以用match函数来分解url，获取协议、host、path、查询字符串等信息
"http://www.baidu.com/test?t=5".match(/^((\w+):\/\/([\w\.]+))\/([^?]+)\?(\S+)$/);
// ["http://www.baidu.com/test?t=5", "http://www.baidu.com", "http", "www.baidu.com", "test", "t=5"]

ログイン後にコピー

exec函数在正则表达式中有分组的情况下，表现和match函数很像，只是无论正则表达式是否有全局属性，exec函数都只返回一个结果，并捕获分组的结果

/h(ell)o/g.exec("abchellodefhellog"); //["hello", "ell"]

ログイン後にコピー

当正则表达式需要匹配几种类型的结果时，可以用到分支条件，例如

"asdasd hi asdad hello asdasd".replace(/hi|hello/,"nihao"); //"asdasd nihao asdad hello asdasd"
"asdasd hi asdad hello asdasd".split(/hi|hello/); //["asdasd ", " asdad ", " asdasd"]

ログイン後にコピー

注意，分支条件影响它两边的所有内容，比如 hi|hello 匹配的是hi或者hello，而不是 hiello 或者 hhello

分组中的分支条件不会影响分组外的内容

"abc acd bbc bcd ".match(/(a|b)bc/g); //["abc", "bbc"]

ログイン後にコピー

后向引用

正则表达式的分组可以在其后边的语句中通过 \+数字组号来引用

比如

// 匹配重复的单词
/(\b[a-zA-Z]+\b)\s+\1/.exec(" asd sf hello hello asd"); //["hello hello", "hello"]

ログイン後にコピー

断言

(?:exp) , 用此方式定义的分组，正则表达式会匹配分组中的内容，但是不再给此分组分配组号，此分组在replace、match等函数中的作用也会消失，效果如下：

/(hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world", "hello"],正常捕获结果字符串和分组字符串
/(?:hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world"]
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"
"/static/app1/js/index.js".replace(/(?:\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js$1-v0.0.1.js"

ログイン後にコピー

(?=exp) 这个分组用在正则表达式的后面，用来捕获exp前面的字符，分组中的内容不会被捕获，也不分配组号

/hello\s(?=world)/.exec("asdadasd hello world asdasd") // ["hello "]

ログイン後にコピー

(?!exp) 和前面的断言相反，用在正则表达式的后面，捕获后面不是exp的字符，同样不捕获分组的内容，也不分配组号

/hello\s(?!world)/.exec("asdadasd hello world asdasd") //null

ログイン後にコピー

处理选项

javascript中正则表达式支持的正则表达式有三个，g、i、m，分别代表全局匹配、忽略大小写、多行模式。三种属性可以自由组合共存。

// 全局匹配 g 
"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
//忽略大小写 i
"abchelloasdasdHelloasd".match(/hello/g); //["hello"]
"abchelloasdasdHelloasd".match(/hello/gi); //["hello","Hello"]

ログイン後にコピー

在默认的模式下，元字符 ^ 和 $ 分别匹配字符串的开头和结尾处，模式 m 改变了这俩元字符的定义，让他们匹配一行的开头和结尾

"aadasd\nbasdc".match(/^[a-z]+$/g); //null 字符串^和$之间有换行符，匹配不上 [a-z]+ ,故返回null
"aadasd\nbasdc".match(/^[a-z]+$/gm); // ["aadasd", "basdc"] ，改变^$的含义，让其匹配一行的开头和末尾，可以得到两行的结果

ログイン後にコピー