JavaScript 正则表达式 ^ 量词

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

JavaScript 正则表达式使用 "^" 量词来匹配字符串的开头。^ 量词通过方法来过滤输入信息开头的数值。该修饰符与 regexp 方法和量词一起操作，用于操作、替换、搜索和匹配数据。

语法

以下语法使用 regex "^" 量词来获取不可用的字符。

或

描述

全局、多行和不区分大小写的修饰符与起始字符量词一起工作。
"value" 表示字符串开头的输入字符。

支持的浏览器

给出的浏览器支持 JavaScript 正则表达式的 "^" 量词。

边
火狐
谷歌浏览器
Internet Explorer
Opera
Safari

示例

这些示例使用 JavaScript 中 "^" 量词的正则表达式，通过不同的方法、值和修饰符进行操作。

示例 1

该示例使用 match() 方法配合不同的值来演示 regex 量词。第一个值显示 null 输出，第二个值显示字符串开头的可用值。

<!DOCTYPE html>
<html>
<head>
    <title>
        JavaScript RegExp quantifier
    </title>
    <style>
        #demo1 {
            background-color: orange;
            border: 1px solid black;
            width: 370px;
        }
    </style>
</head>
<body>
    <div id="demo1">
        <h3>
            JavaScript RegExp ^ quantifier
        </h3>
        <h4> The regex ^ quantifier operates with the match method
        </h4>
        <div id="regex_quantifier">
        </div>
        <div id="regex_quantifier2">
        </div>
        <!-- Click the button to get the quantifier output -->
        <button onclick="quant_click();"> Click Here!</button>
    </div>
    <script>
        function quant_click() {
            //not available character at the start of the string
            var quant_q1 = "is java and javascript language learn from TpointTech website";
            let quantifier_pattern = /^java/g;
            var quant_alter1 = quant_q1.match(quantifier_pattern);
            var quant_ele = document.getElementById("regex_quantifier");
            quant_ele.innerHTML = "Available java character: " + quant_alter1;
            //available character at the start of the string
            let quantifier_pattern2 = /^is/g;
            var quant_alter2 = quant_q1.match(quantifier_pattern2);
            var quant_ele2 = document.getElementById("regex_quantifier2");
            quant_ele2.innerHTML = "Available website character: " + quant_alter2;
        }
    </script>
</body>
</html>

输出

输出显示字符串开头的可用字符。

示例 2

该示例使用 match() 方法配合全局和不区分大小写的修饰符来演示 regex 量词。我们可以通过字符串看到两个修饰符之间的区别。

<!DOCTYPE html>
<html>
<head>
    <title>
        JavaScript RegExp quantifier
    </title>
    <style>
        #demo1 {
            background-color: orange;
            border: 1px solid black;
            width: 370px;
        }
    </style>
</head>
<body>
    <div id="demo1">
        <h3>
            JavaScript RegExp ^ quantifier
        </h3>
        <h4>
            The regex ^ quantifier operates with the match method using the global and case-insensitive modifier.
        </h4>
        <div id="regex_quantifier">
        </div>
        <div id="regex_quantifier2">
        </div>
        <!-- Click the button to get the quantifier output -->
        <button onclick="quant_click();"> Click Here! </button>
    </div>
    <script>
        function quant_click() {
            var quant_q1 = "IS java and javascript language learn from TpointTech                  		WEBSITE";
            // use regex available at the start position 
            let quantifier_pattern = /^is/g;
            var quant_alter1 = quant_q1.match(quantifier_pattern);
            var quant_ele = document.getElementById("regex_quantifier");
            quant_ele.innerHTML = "Available java character: " + quant_alter1;
            // use regex with global and case-insensitive modifier
            let quantifier_pattern2 = /^is/gi;
            var quant_alter2 = quant_q1.match(quantifier_pattern2);
            var quant_ele2 = document.getElementById("regex_quantifier2");
            quant_ele2.innerHTML = "Available website character: " + quant_alter2;
        }
    </script>
</body>
</html>

输出

输出显示字符串开头的可用字符。

示例 3

该示例使用量词和 search() 方法配合不同的值来演示 regex 量词。第一个值显示 "-1" 输出，第二个值显示字符的位置。

<!DOCTYPE html>
<html>
<head>
    <title>
        JavaScript RegExp quantifier
    </title>
    <style>
        #demo1 {
            background-color: orange;
            border: 1px solid black;
            width: 370px;
        }
    </style>
</head>
<body>
    <div id="demo1">
        <h3>
            JavaScript RegExp ^ quantifier
        </h3>
        <h4> The regex ^ quantifier operates with the search method
        </h4>
        <div id="regex_quantifier"> </div>
        <div id="regex_quantifier2"> </div>
        <!-- Click the button to get the quantifier output -->
        <button onclick="quant_click();"> Click Here! </button>
    </div>
    <script>
        function quant_click() {
            //not available character at the start character of the string
            var quant_q1 = "is java and javascript language learn from TpointTech website";
            let quantifier_pattern = /^java/g;
            var quant_alter1 = quant_q1.search(quantifier_pattern);
            var quant_ele = document.getElementById("regex_quantifier");
            quant_ele.innerHTML = "Available java character: " + quant_alter1;
            //available character at the start of the string
            let quantifier_pattern2 = /^is/g;
            var quant_alter2 = quant_q1.search(quantifier_pattern2);
            var quant_ele2 = document.getElementById("regex_quantifier2");
            quant_ele2.innerHTML = "Available website character: " + quant_alter2;
        }
    </script>
</body>
</html>

输出

输出显示输入字符串的可用起始位置。

示例 4

该示例使用量词和 test() 方法配合不同的值来演示 regex 量词。第一个值显示 "false" 输出，第二个正则表达式显示 "true" 输出。

<!DOCTYPE html>
<html>

<head>
    <title>
        JavaScript RegExp quantifier
    </title>
    <style>
        #demo1 {
            background-color: orange;
            border: 1px solid black;
            width: 370px;
        }
    </style>
</head>
<body>
    <div id="demo1">
        <h3>
            JavaScript RegExp "^" quantifier
        </h3>
        <h4> the javascript regex "^" quantifier operates with the test method
        </h4>
        <div id="regex_quantifier"> </div>
        <div id="regex_quantifier2"> </div>
        <!-- Click the button to get the quantifier output -->
        <button onclick="quant_click();"> Click Here! </button>
    </div>
    <script>
        function quant_click() {
            //not available character at the start string
            var quant_q1 = "java and javascript language learn from TpointTech website";
            let quantifier_pattern = /^java/g;
            var quant_alter1 = quantifier_pattern.test(quant_q1);
            var quant_ele = document.getElementById("regex_quantifier");
            quant_ele.innerHTML = "Available java character: " + quant_alter1;
            //available character at the start string
            let quantifier_pattern2 = /^java/g;
            var quant_alter2 = quantifier_pattern2.test(quant_q1);
            var quant_ele2 = document.getElementById("regex_quantifier2");
            quant_ele2.innerHTML = "Available website character: " + quant_alter2;
        }
    </script>
</body>
</html>

输出

输出显示开头输入字符串的布尔值。

示例 5

该示例使用量词和 replace() 方法配合替换值来演示 regex 量词。我们可以使用给定的模式和新的关键字来替换或删除正则表达式中的值。

<!DOCTYPE html>
<html>
<head>
    <title>
        JavaScript RegExp quantifier
    </title>
    <style>
        #demo1 {
            background-color: orange;
            border: 1px solid black;
            width: 370px;
        }
    </style>
</head>
<body>
    <div id="demo1">
        <h3>
            JavaScript RegExp ^ quantifier
        </h3>
        <h4> The regex ^ quantifier operates with the replace method
        </h4>
        <p> input: is java and javascript language learn from TpointTech website </p>
        <div id="regex_quantifier"> </div>
        <div id="regex_quantifier2"> </div>
        <!-- Click the button to get the quantifier output -->
        <button onclick="quant_click();"> Click Here! </button>
    </div>
    <script>
        function quant_click() {
            //available character at the end string with regex pattern
            var quant_q1 = "is java and javascript language learn from TpointTech website";
            let quantifier_pattern = /^is/g;
            let replace_val = "online tutorial"
            var quant_alter1 = quant_q1.replace(quantifier_pattern, replace_val);
            var quant_ele = document.getElementById("regex_quantifier");
            quant_ele.innerHTML = "replace: <b>" + quant_alter1 + "</b>";
            //Remove end string with new regexp syntax
            let quantifier_pattern2 = new RegExp("^is", "g");
            let replace_val1 = "";
            var quant_alter2 = quant_q1.replace(quantifier_pattern2, replace_val1);
            var quant_ele2 = document.getElementById("regex_quantifier2");
            quant_ele2.innerHTML = "remove: <b>" + quant_alter2 + "</b>";
        }
    </script>
</body>
</html>

输出

输出显示开头字符的替换值。

结论

JavaScript "^" 量词与修饰符一起使用，通过正则表达式获取第一个输入字符。

下一主题如何在 JavaScript 中将数字四舍五入到两位小数

JavaScript 正则表达式 ^ 量词

语法

支持的浏览器

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

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 正则表达式 ^ 量词

语法

支持的浏览器

示例

结论

相关帖子

如何使用 JavaScript 选中复选框

GCD 在 JavaScript 中的用法

JavaScript 编译器

何时不应在 JavaScript 中使用箭头函数

JavaScript 最新版本

JavaScript RegExp {x,} 量词

如何使用 JavaScript 中的 WASM

JavaScript 鼠标事件

JavaScript 完全参考

JavaScript 初学者练习题

订阅 Tpoint Tech

联系信息

关注我们