JavaScript 正则表达式对象


目录

    显示目录


正则表达式是形成一个字符的序列 搜索模式。

搜索模式可用于文本搜索和文本替换 运营。


什么是正则表达式?

正则表达式是形成搜索的字符序列 模式。

当您在文本中搜索数据时,可以使用此搜索模式来描述您要搜索的内容。

正则表达式可以是单个字符,也可以是更复杂的模式。

正则表达式可用于执行所有类型的文本搜索文本替换操作。

句法

/pattern/modifiers;

例子

/w3schools/i;

示例解释:

/w3schools/i 是一个正则表达式。

w3schools 是一种模式(用于搜索)。

i 是一个修饰符(将搜索修改为不区分大小写)。


使用字符串方法

在 JavaScript 中,正则表达式通常与两个 字符串一起使用 方法search()replace()

search() 方法使用表达式来搜索 匹配,并返回匹配的位置。

replace() 方法返回一个修改后的字符串,其中 图案被替换。


将 String search() 与字符串一起使用

search() 方法在字符串中搜索指定值并返回匹配的位置:

例子

使用字符串在字符串中搜索“W3schools”:

let text = "Visit W3Schools!";
let n = text.search("W3Schools");

n 中的结果将是:

6

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Search a string for &quot;W3Schools&quot;, and display the position of the match:</p>

<p id="demo"></p>

<script>
let text = "Visit W3Schools!"; 
let n = text.search("W3Schools");
document.getElementById("demo").innerHTML = n;
</script>

</body>
</html>


将字符串 search() 与正则表达式结合使用

例子

使用正则表达式对字符串中的“w3schools”进行不区分大小写的搜索:

let text = "Visit W3Schools";
let n = text.search(/w3schools/i);

n 中的结果将是:

6

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search a string for "w3Schools", and display the position of the match:</p>

<p id="demo"></p>

<script>
let text = "Visit W3Schools!"; 
let n = text.search(/w3Schools/i);
document.getElementById("demo").innerHTML = n;
</script>

</body>
</html>



将字符串 replace() 与字符串一起使用

replace() 方法将指定值替换为字符串中的另一个值:

let text = "Visit Microsoft!";
let result = text.replace("Microsoft", "W3Schools");

自己尝试一下 →

<!DOCTYPE html>
<html>

<body>

<h1>JavaScript String Methods</h1>
<p>Replace &quot;Microsoft&quot; with &quot;W3Schools&quot; in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

</body>
</html>



将字符串 replace() 与正则表达式结合使用

例子

使用不区分大小写的正则表达式将 Microsoft 替换为 W3Schools 在一个字符串中:

let text = "Visit Microsoft!";
let result = text.replace(/microsoft/i, "W3Schools");

res 中的结果将是:

Visit W3Schools!

自己尝试一下→

<!DOCTYPE html>
<html>

<body>

<h2>JavaScript String Methods</h2>

<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace(/microsoft/i, "W3Schools");
}
</script>

</body>
</html>

你注意到了吗?

正则表达式参数(而不是字符串参数)可以在上述方法中使用。
正则表达式可以使您的搜索更加强大(例如不区分大小写)。


正则表达式修饰符

修饰符可用于执行不区分大小写的更全局搜索:

修饰符:

i

描述:执行不区分大小写的匹配

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a case-insensitive search for "w3schools" in a string:</p>

<p id="demo"></p>

<script>
let text = "Visit W3Schools";
let result = text.match(/w3schools/i);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

修饰符:

g

描述:执行全局匹配(查找所有匹配项而不是在第一个匹配项后停止)

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for "is" in a string:</p>

<p id="demo"></p>

<script>
let text = "Is this all there is?";
let result = text.match(/is/g);
document.getElementById("demo").innerHTML = result; 
</script>

</body>
</html>

修饰符:

m

描述:执行多行匹配

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a multiline search for "is" at the beginning of each line in a string:</p>

<p id="demo"></p>

<script>
let text = "\nIs th\nis it?";
let result = text.match(/^is/m);
document.getElementById("demo").innerHTML = "Result is: " + result;
</script>

</body>
</html>

正则表达式模式

括号用于查找一系列字符:

修饰符:

[abc]

描述:查找括号内的任意字符

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for the character "h" in a string:</p>

<p id="demo"></p>

<script>
let text = "Is this all there is?";
let result = text.match(/[h]/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

修饰符:

[0-9]

描述:查找括号内的任意数字

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for the numbers 1 to 4 in a string:</p>

<p id="demo"></p>

<script>
let text = "123456789";
let result = text.match(/[1-4]/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

修饰符:

(x|y)

描述:查找任何用 | 分隔的替代项

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for any of the specified alternatives (red|green):</p>

<p id="demo"></p>

<script>
let text = "re, green, red, green, gren, gr, blue, yellow";
let result = text.match(/(red|green)/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

元字符是具有特殊含义的字符:

修饰符:

\d

描述:查找数字

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for digits in a string:</p>

<p id="demo"></p>

<script>
let text = "Give 100%!"; 
let result = text.match(/\d/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

修饰符:

\s

描述:查找空白字符

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for whitespace characters in a string:</p>

<p id="demo"></p>

<script>
let text = "Is this all there is?";
let result = text.match(/\s/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

修饰符:

\b

描述:在单词开头查找匹配项,如下所示:\bWORD,或在单词末尾查找匹配项 像这样: WORD\b

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search for the characters "LO" in the <b>beginning</b> of a word in the phrase:</p>
<p>"HELLO, LOOK AT YOU!"</p>

<p>Found in position: <span id="demo"></span></p>

<script>
let text = "HELLO, LOOK AT YOU!"; 
let result = text.search(/\bLO/);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search for the characters "LO" in the <b>end</b> of a word in the phrase:</p>
<p>"HELLO, LOOK AT YOU!"</p>

<p>Found in position: <span id="demo"></span></p>

<script>
let text = "HELLO, LOOK AT YOU!"; 
let result = text.search(/LO\b/);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

修饰符:

\uxxxx

描述:查找十六进制数xxxx指定的Unicode字符

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for the hexadecimal number 0057 (W) in a string:</p>

<p id="demo"></p>

<script>
let text = "Visit W3Schools. Hello World!"; 
let result = text.match(/\u0057/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

量词定义数量:

修饰符:

n+

描述:匹配任何至少包含一个n的字符串

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for at least one "o" in a string:</p>

<p id="demo"></p>

<script>
let text = "Hellooo World! Hello W3Schools!"; 
let result = text.match(/o+/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

修饰符:

n*

描述:匹配任何包含零次或多次出现n的字符串

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for an "l", followed by zero or more "o" characters:</p>

<p id="demo"></p>

<script>
let text = "Hellooo World! Hello W3Schools!"; 
let result = text.match(/lo*/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

修饰符:

n?

描述:匹配任何包含零次或一次出现n的字符串

尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for a "1", followed by zero or one "0" characters:</p>

<p id="demo"></p>

<script>
let text = "1, 100 or 1000?";
let result = text.match(/10?/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

使用正则表达式对象

在 JavaScript 中,RegExp 对象是一个正则表达式对象 预定义的属性和方法。


使用测试()

test() 方法是 RegExp 表达式方法。

它在字符串中搜索模式,并返回 true 或错误,取决于结果。

以下示例在字符串中搜索字符“e”:

例子

const pattern = /e/;
pattern.test("The best things in life are free!");

由于字符串中有一个“e”,因此上面代码的输出将是:

true

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search for an "e" in the next paragraph:</p>

<p id="p01">The best things in life are free!</p>

<p id="demo"></p>

<script>
let text = document.getElementById("p01").innerHTML;
const pattern = /e/;
document.getElementById("demo").innerHTML = pattern.test(text);
</script>

</body>
</html>

您不必先将正则表达式放入变量中。他们俩 上面的行可以缩短为一行:

/e/.test("The best things in life are free!");

使用 exec()

exec() 方法是 RegExp 表达式方法。

它在字符串中搜索指定模式,并将找到的文本返回为 一个东西。

如果未找到匹配项,则返回一个空的 (null) 对象。

以下示例在字符串中搜索字符“e”:

例子

/e/.exec("The best things in life are free!");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p id="demo"></p>

<script>
const obj = /e/.exec("The best things in life are free!");
document.getElementById("demo").innerHTML =
"Found " + obj[0] + " in position " + obj.index + " in the text: " + obj.input;
</script>

</body>
</html>

完整的正则表达式参考

如需完整参考,请访问我们的完整版 JavaScript 正则表达式参考。

该参考包含所有正则表达式的描述和示例 属性和方法。