Javascript regexp 前瞻

2025年3月18日 | 阅读 5 分钟

先行断言（Lookahead）模式使 JavaScript 能够向前扫描字符串以查找指定的模式。环视（Lookaround）是先行断言和后行断言（Lookbehind）的组合表达式。只有当它们出现在另一组字符之前时，我们才能使用先行断言捕获特定的组。当我们希望在同一字符串中查找不同模式时，这很有用。

语法

以下语法显示了正向的 Javascript 正则表达式先行断言

以下语法显示了负向的 Javascript 正则表达式先行断言

说明

有两种不同类型的先行断言，它们如下：

正向先行断言：它会确定搜索模式中是否包含某个特定元素，但不会匹配它。将特定模式括在 (?= 和 ) 之间即可生成正向先行断言。
负向先行断言：它会检查搜索模式中是否不存在某个特定元素。将特定模式括在 (?! 和 ) 之间即可生成负向先行断言。

示例

以下示例展示了正则表达式的正向和负向先行断言。

示例 1

在此示例中，“butter” 使用正向先行断言表达式匹配“fly”或“milk”。如果第一个值出现在最后一个值之前，则输出将显示 true。如果第一个值不匹配最后一个值，则输出显示 false。

<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookahead </title>
</head>
<body>
<h3> Javascript regexp Lookahead </h3>
<h4> Displays the similar values in the variable data using positive lookahead. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let word1 = "butterfly";
let word2 = "buttermilk";
let exp = /(butter(?=fly))/;
let exp1 = /(butter(?=milk))/;
let result1 = (exp.test(word1));
let result2 = (exp.test(word2));
let result3 = (exp1.test(word1));
let result4 = (exp1.test(word2));
document.getElementById('demo_data').innerHTML = result1;
document.getElementById('demo_data1').innerHTML = result2;
document.getElementById('demo_data2').innerHTML = result3;
document.getElementById('demo_data3').innerHTML = result4;
</script>
</body>
</html>

输出

下图显示了布尔值作为输出。

示例 2

在此示例中，“butter” 使用正向先行断言表达式匹配“fly”或“milk”。我们可以看到带有先行断言模式的正则表达式可以获得所需的值。 $1 对于从模式中获取后面的值至关重要。

<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookahead </title>
</head>
<body>
<h3> Javascript regexp Lookahead </h3>
<h4> Displays the similar values in the variable data using positive lookahead. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let word1 = "butterfly";
let word2 = "soyamilk";
let exp = /(butter(?=fly))/;
let exp1 = /(soya(?=milk))/;
let result1 = (exp1.test(word2));
let result2 = (RegExp.$1);
let result4 = (exp.test(word1));
let result3 = (RegExp.$1);
document.getElementById('demo_data').innerHTML = result1;
document.getElementById('demo_data1').innerHTML = result2;
document.getElementById('demo_data2').innerHTML = result3;
</script>
</body>
</html>

输出

下图显示了数据值作为输出。

Example3

在此示例中，“butter” 使用负向先行断言表达式匹配“fly”或“milk”。如果第一个值不出现在最后一个值之前，则输出将显示 true。如果第一个值不匹配最后一个值，则输出显示 false。

<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookahead </title>
</head>
<body>
<h3> Javascript regexp Lookahead </h3>
<h4> Displays the similar values in the variable data using negative lookahead. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let words1 = "soyafly";
let words2 = "soyamilk";
let exp = /(soya(?!fly))/;
let exp1 = /(soya(?!milk))/;
let result1 = (exp.test(words1));
let result2 = (exp.test(words2));
let result3 = (exp1.test(words1));
let result4 = (exp1.test(words2));
document.getElementById('demo_data').innerHTML = result1;
document.getElementById('demo_data1').innerHTML = result2;
document.getElementById('demo_data2').innerHTML = result3;
document.getElementById('demo_data3').innerHTML = result4;
</script>
</body>
</html>

输出

下图显示了布尔值作为输出。

Example4

在此示例中，“butter” 使用负向先行断言表达式匹配“fly”或“milk”。我们可以看到带有负向先行断言模式的正则表达式可以获得输出。此示例使用 $1 显示了所需的值。 $1 对于从模式中获取不存在后面的值至关重要。

<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookahead </title>
</head>
<body>
<h3> Javascript regexp Lookahead </h3>
<h4> Displays the similar values in the variable data using negative lookahead. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let fword = "soyafly";
let sword = "soyamilk";
let exp = /(soya(?!fly))/;
let result1 = (exp.test(fword));
let result2 = (exp.test(sword))
let result3 = (RegExp.$1);
document.getElementById('demo_data').innerHTML = result1;
document.getElementById('demo_data1').innerHTML = result2;
document.getElementById('demo_data2').innerHTML = result3;
</script>
</body>
</html>

输出

下图显示了布尔值作为输出。

示例 5

在此示例中，先行断言正则表达式用于从模式值中获取可用值。我们可以使用控制台选项卡、警报和其他输出选项卡。我们可以使用先行断言函数来处理 match 函数。此处，输出显示输入值之前的值。

<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookahead </title>
</head>
<body>
<h3> Javascript regexp Lookahead </h3>
<h4> Displays the similar values in the variable data using positive lookahead. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let word1 = "web development costs 40@";
let word2 = "32@ for the tutorial";
let result1 = word1.match(/\d+(?=@)/);
let result2 = word2.match(/\d+(?=@)/);
let result3 = word1.match(/\d+(?=@)/);
let result4 = word2.match(/\d+(?=@)/);
document.getElementById('demo_data').innerHTML = result1;
document.getElementById('demo_data1').innerHTML = result2;
document.getElementById('demo_data2').innerHTML = result3;
document.getElementById('demo_data3').innerHTML = result4;
</script>
</body>
</html>

输出

下图显示了布尔值作为输出。

示例 6

在此示例中，负向先行断言正则表达式用于从模式值中获取可用值。

<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookahead </title>
</head>
<body>
<h3> Javascript regexp Lookahead </h3>
<h4> Displays the similar values in the variable data using positive lookahead. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
let word1 = "web development costs 40@802";
let word2 = "32@405 for the tutorial";
let result1 = word1.match(/\d+(?!@)/);
let result2 = word2.match(/\d+(?!@)/);
let result3 = word1.match(/\d+(?!$2)/);
document.getElementById('demo_data').innerHTML = result1;
document.getElementById('demo_data1').innerHTML = result2;
document.getElementById('demo_data2').innerHTML = result3;
</script>
</body>
</html>

输出

下图显示了布尔值作为输出。

支持的浏览器

以下浏览器支持 javascript 后行断言表达式。

谷歌浏览器
火狐
Internet Explorer
Opera
Safari

结论

javascript 先行断言表达式用于在字符串值中搜索所需的关键字。此表达式用于模式识别和操作。

下一主题Javascript 正则表达式后行断言

Javascript regexp 前瞻

语法

示例

支持的浏览器

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

Javascript regexp 前瞻

语法

示例

支持的浏览器

结论

相关帖子

Mouseover 函数在 javascript 中的用法

Javascript previousElementSibling 属性

Mouseout 事件在 javascript 中的用法

JavaScript Endswith() 函数

获取 JavaScript 中节点的子元素

npm Install 命令

JavaScript 中的涟漪效果

使用 CSS 和 JS 的 GIF 播放器

如何使用 JavaScript 在网站上添加 WhatsApp 分享按钮

JavaScript Infinity 属性

订阅 Tpoint Tech

联系信息

关注我们