Javascript正则表达

最新推荐文章于 2024-07-30 16:18:26 发布
最新推荐文章于 2024-07-30 16:18:26 发布
阅读量191 收藏 2
点赞数 2
分类专栏： 笔记 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43515837/article/details/111817856
版权

JS正则表达式

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

该搜索模式可用于文本搜索和文本替换操作。

什么是正则表达式？

正则表达式是构成搜索模式（search pattern）的字符序列。

当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。

正则表达式可以是单字符，或者更复杂的模式。

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

语法

/pattern/modifiers;

实例

var patt = /w3school/i;

例子解释：

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

w3school 是模式（pattern）（在搜索中使用）。

i 是修饰符（把搜索修改为大小写不敏感）。

使用字符串方法

在 JavaScript 中，正则表达式常用于两个字符串方法：search() 和 replace()。

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

replace() 方法返回模式被替换处修改后的字符串。

使用字符串方法 search() 来处理字符串

search() 方法也接受字符串作为搜索参数。字符串参数将被转换为正则表达式：

实例

使用字符串来执行对 "W3school" 的搜索：

var str = "Visit W3School!";
var n = str.search("W3School");

 

在字符串方法 search() 中使用正则表达式

实例

使用正则表达式执行搜索字符串中 "w3school" 的大小写不敏感的搜索：

var str = "Visit W3School";
var n = str.search(/w3school/i);

n 中的结果将是：

6

 

使用字符串方法 replace() 处理字符串

replace() 也接受字符串作为搜索参数：

var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "W3School");

 

在字符串方法 replace() 中使用正则表达式

实例

使用大小写不明的正则表达式以 W3school 来替换字符串中的 Microsoft：

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3School");

res 的结果将是：

Visit W3School!

 

您注意到了吗？

正则表达式参数（而不是字符串参数）可以在上面的方法中使用。

正则表达式可以使您的搜索更强大（例如，不区分大小写）。

正则表达式修饰符

修饰符可用于大小写不敏感的更全局的搜素：

修饰符描述 
i执行对大小写不敏感的匹配。试一试
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。试一试
m执行多行匹配。试一试

正则表达式模式

括号用于查找一定范围的字符串：

表达式描述 
[abc]查找方括号之间的任何字符。试一试
[0-9]查找任何从 0 至 9 的数字。试一试
(x|y)查找由 | 分隔的任何选项。试一试

元字符（Metacharacter）是拥有特殊含义的字符：

元字符描述 
\d查找数字。试一试
\s查找空白字符。试一试
\b匹配单词边界。试一试
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。试一试

Quantifiers 定义量词：

量词描述 
n+匹配任何包含至少一个 n 的字符串。试一试
n*匹配任何包含零个或多个 n 的字符串。试一试
n?匹配任何包含零个或一个 n 的字符串。试一试

使用 RegExp 对象

在 JavaScript 中，RegExp 对象是带有预定义属性和方法的正则表达式对象。

使用 test()

test() 是一个正则表达式方法。

它通过模式来搜索字符串，然后根据结果返回 true 或 false。

下面的例子搜索字符串中的字符 "e"：

实例

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

由于字符串中有一个 "e"，以上代码的输出将是：

true

 

您不必首先把正则表达式放入变量中。上面的两行可缩短为一行：

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

使用 exec()

exec() 方法是一个正则表达式方法。

它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。

如果未找到匹配，则返回 null。

下面的例子搜索字符串中的字符 "e"：

实例

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

由于字符串中有一个 "e"，以上代码的输出将是：

e

正则表达式参考

https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

 

正则表达式匹配与搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    //正则的使用
    var str = "sse11fe5wrrrdfda";
    //使用正则匹配子串str中的数字
    console.log(str.match((/[0-9]+/)));
    //使用RegExp创建一个正则对象
    var pat = new RegExp(/[0-9]+/);
    console.log(str.match(pat));
    console.log(pat.exec(str));
    //以上三种返回结果一致
    

     //正则搜索
     console.log(str.search(/[0-9]+/)); //4 返回首次匹配位置 ，没有返回-1
    console.log(str.search(pat)); //4 返回首次匹配位置 ，没有返回-1
    console.log(pat.test(str)); //true 返回是否匹配

    //匹配多个
    console.log("==============================");
    var str = "wert45678yui456ytr678ew";

    console.log(str.match(/[0-9]+/)); //默认只匹配一次
    console.log(str.match(/[0-9]+/g)); //(3) ["45678", "456", "678"] 使用g修饰符 匹配所有


</script>
</html>

JS正则表达式语法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的正则表达式</title>
</head>
<body>
    <h1>JavaScript中的正则表达式</h1>
</body>
<script>
    //正则的使用
    var str = "wer245ty4d56fg78hj987k";
    //使用正则匹配子串str中的数字
    //console.log(str.match(/[0-9]/g)); //匹配任意一位数字
    //console.log(str.match(/[0-9][0-9]/g)); //匹配任意两位数字
    //console.log(str.match(/[0-9]{2}/g)); //匹配任意两位数字
    //console.log(str.match(/[0-9][0-9][0-9]/g)); //匹配任意三位数字
    //console.log(str.match(/[0-9]{3}/g)); //匹配任意三位数字
    //console.log(str.match(/[0-9]{2,3}/g)); //匹配任意两位或三位数字
    //console.log(str.match(/\d{2,3}/g)); //匹配任意两位或三位数字
    
    console.log(str.match(/\d+/g)); //匹配至少一位数字
    console.log(str.match(/\d{1,}/g)); //匹配至少一位数字
    console.log(str.match(/[0-9]{1,}/g)); //匹配至少一位数字

    //\d{1,}  [0-9]{1,}  \d+  [0-9]+ 都表示至少一位的数字

    //精确匹配
    var pat = new RegExp("[0-9]+");
    console.log(pat.test("er2567thj")); //true 匹配子串中是否含有数字

    var pat = new RegExp("^[0-9]+");
    console.log(pat.test("er2567thj")); //false 匹配子串中是否是以数字开头
    console.log(pat.test("2567thj"));   //true 匹配子串中是否是以数字开头

    var pat = new RegExp("[0-9]+$");
    console.log(pat.test("er2567thj")); //false 匹配子串中是否是以数字结尾
    console.log(pat.test("wer2567"));   //true 匹配子串中是否是以数字结尾

    var pat = new RegExp("^[0-9]+$");
    console.log(pat.test("2567thj"));   //false 匹配子串中是否是纯数字
    console.log(pat.test("wer2567"));   //false 匹配子串中是否是纯数字
    console.log(pat.test("2567"));   //true 匹配子串中是否是纯数字

    var pat2 = new RegExp("^[0-9]{6}$"); //精确匹配任意6位数字
</script>
</html>

 

JavaScript RegExp 对象

RegExp 对象

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

直接量语法

/pattern/attributes

创建 RegExp 对象的语法：

new RegExp(pattern, attributes);

参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

返回值

一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

抛出

SyntaxError - 如果 pattern 不是合法的正则表达式，或 attributes 含有 "g"、"i" 和 "m" 之外的字符，抛出该异常。

TypeError - 如果 pattern 是 RegExp 对象，但没有省略 attributes 参数，抛出该异常。

修饰符

修饰符描述
i执行对大小写不敏感的匹配。
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m执行多行匹配。

方括号

方括号用于查找某个范围内的字符：

表达式描述
[abc]查找方括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-Z]查找任何从大写 A 到大写 Z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。
[adgk]查找给定集合内的任何字符。
[^adgk]查找给定集合外的任何字符。
(red|blue|green)查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符描述
.查找单个字符，除了换行和行结束符。
\w查找单词字符。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NUL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词描述
n+匹配任何包含至少一个 n 的字符串。
n*匹配任何包含零个或多个 n 的字符串。
n?匹配任何包含零个或一个 n 的字符串。
n{X}匹配包含 X 个 n 的序列的字符串。
n{X,Y}匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}匹配包含至少 X 个 n 的序列的字符串。
n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

属性描述FFIE
globalRegExp 对象是否具有标志 g。14
ignoreCaseRegExp 对象是否具有标志 i。14
lastIndex一个整数，标示开始下一次匹配的字符位置。14
multilineRegExp 对象是否具有标志 m。14
source正则表达式的源文本。14

RegExp 对象方法

方法描述FFIE
compile编译正则表达式。14
exec检索字符串中指定的值。返回找到的值，并确定其位置。14
test检索字符串中指定的值。返回 true 或 false。14

支持正则表达式的 String 对象的方法

方法描述FFIE
search检索与正则表达式相匹配的值。14
match找到一个或多个正则表达式的匹配。14
replace替换与正则表达式匹配的子串。14
split把字符串分割为字符串数组。14

 

JS正则表达式替换与分割

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的正则表达式</title>
</head>
<body>
    <h1>JavaScript中的正则表达式分割和替换</h1>
</body>
<script>
    var str = "23:45:67:89:87:63";
    console.log(str.split(":")); //(6) ["23", "45", "67", "89", "87", "63"] 使用子串拆分

    str = "23:45;67:89!87#63";
    console.log(str.split(/[^0-9]/)); //(6) ["23", "45", "67", "89", "87", "63"] 使用正则拆分


    str = "23:45;67:89!87#63";
    //将上面子串中的分隔符统一替换成逗号，
    console.log(str.replace(/[^0-9]/g,",")); //23,45,67,89,87,63

    str = "<b>aaa</b><b>bb>b</b><b>ccc</b>";
    //将上面子串中的<b></b>标签替换成<i></i>   下面其中$1表示重复正则中第一个小括号中内容
    console.log(str.replace(/<b>(.*?)<\/b>/g,"<i>$1</i>")); //.*是贪婪匹配（最大） .*?是拒绝贪婪匹配（最小）

    console.log("=========================================");

    str = "04/28/2020"; //西方日期格式，请使用正则替换成中国的[年-月-日]格式
    console.log(str.replace(/(\d{2})\/(\d{2})\/(\d{4})/,"$3-$1-$2"));
    //其中$1，$2 $3表示重复正则中第一、第二、第三个小括号中内容
</script>
</html>
 

JS正则表达式表单验证

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的正则表达式</title>
</head>
<body>
    <h1>JavaScript中的正则表达式在表单验证中的实例</h1>
    <form action="js03.html" name="myform" onsubmit="return doSubmit()" method="post">
        账号：<input type="text" name="uname" onblur="checkUname()" /><br/><br/>
        邮箱：<input type="text" name="email" onblur="checkEmail()"/><br/><br/>
        <input type="submit" value="提交"/>
    </form>
</body>
<script>
    //验证账号函数
    function checkUname(){
        //获取账号信息
        var uname = document.myform.uname.value;
        //执行验证
        //if(uname.match(/^[0-9A-Za-z_]{8,16}$/) == null){
        if(uname.match(/^\w{8,16}$/) == null){
            alert("请输入8~16位的账号信息！");
            return false;
        }
        return true;
    }

    //验证邮箱函数
    function checkEmail(){
        //获取账号信息
        var email = document.myform.email.value;
        //执行验证
        if(email.match(/^\w+@\w+(\.\w+){1,2}$/) == null){
            alert("请输入正确的Email信息！");
            return false;
        }
        return true;
    }

    //表单提交
    function doSubmit(){
        return checkUname() && checkEmail();
    }
</script>
</html>
TLQHT
关注
专栏目录
vue 保留两位小数 不能直接用toFixed(2) 的解决
10-14
主要介绍了vue 保留两位小数 不能直接用toFixed(2) 的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue保留两位小数
weixin_50528671的博客
08-28 4419
如果需要在Vue实例中多次使用保留两位小数的值，建议使用计算属性。计算属性可以根据响应式数据动态地计算出一个新的值。在Vue.js中，你可以使用过滤器（Filters）或计算属性（Computed Properties）来保留两位小数。在模板中使用过滤器可以格式化数据并保留指定的小数位数。这样，`formattedPrice`会自动根据`price`的值保留两位小数并输出到模板中。你可以根据具体需求选择使用过滤器或计算属性。上述代码会将`price`的值保留两位小数并输出到模板中。
JS正则表达式详解
最新发布
weixin_66557048的博客
07-30 1099
例如：匹配第一个bat或者cat,不区分大小写return $1});
Java学习-17 正则表达式简述
deemo_hui的博客
11-04 548
Java学习-17 正则表达式 1、什么是正则表达式？ 正则表达式是构成搜索模式（search pattern）的字符序列。 当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。 正则表达式可以是单字符，或者更复杂的模式。 正则表达式可用于执行所有类型的文本搜索和文本替换操作。 2、JavaScript RegExp 对象 RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。 2.1、语法 直接量语法： /pattern/attributes 创建 RegExp 对象的语法： ne
vue显示两位小数的方法_element-ui表格列金额显示两位小数的方法
weixin_39760389的博客
12-19 1000
对于金额的显示，大多情况下需要保留两位小数，比如下面的(表格采用 element-ui)：在vue.js中，对文本的处理通常是通过设置一系列的过滤器，过滤器可以用在两个地方：双花括号插值 和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。定义过滤器filters: {rounding (value) {return value.tofixed(2)}}tofixed() 方法可把 nu...
vue只保留小数点后两位
qq_42740298的博客
02-28 3389
3.输入时随时监听，小数点后超出两位不允许输入。2.data中设置绑定的内容。1.在input上绑定。
正则表达大总结(Java正则表达30分钟入门教程 JavaScript正则表达)
01-21
在Java和JavaScript中，正则表达式被广泛应用于数据验证、搜索与替换、提取信息等多种场景。本教程将对Java和JavaScript中的正则表达式进行深入的探讨。 在Java中，正则表达式是通过`java.util.regex`包提供的API来...
javascript正则表达.html
02-01
javascript正则表达
javascript正则表达式中的replace方法详解
12-04
前面的文章我已经介绍了正则的四个基本方法，当时也提到过replace方法 我们来回顾一下replace方法的使用： 先定义一个正则对象：var re=/中间写匹配的条件/; replace（）：正则匹配字符串，若是匹配成功，将匹配成功...
javascript正则表达式 | 知识梳理
01-07
正则表达式由pattern和flags组成，我不知道怎么翻译这个，我用我自己的话解释一下，pattern可以理解为一个函数（做什么）, flags可以理解为参数, 比如flags为g为全局匹配，i为忽略大小写。 字面量 这种方法最方便...
学习JavaScript正则表达式
11-25
JavaScript正则表达式学习： 有个在线调试正则的工具。下面的所有示例代码，都可以在codepen上查看到。 1.创建正则表达式 var re = /ab+c/; //方式一 正则表达式字面量 var re = new RegExp("ab+c"); //方式二 ...
Vue toFixed保留两位小数的3种方式
01-21
第一种： 直接写在js里面，这是最简单的 val.toFixed(2) 第二种： 在ElementUi表格中使用 第三种： 在取值符号中使用 {{}} 定义一个方法 towNumber(val) { return val.toFixed(2) } 使用 {{ towNumber(row.equiValue) }} 补充知识：vue中提示toFixed不是函数 vue中toFixed获取小数点后两位 错误提示： .toFixed is not a function 解决办法： Number(_this.group_cash).toFixed(2) 以
vue 保留两位小数
牛奔的博客
04-27 2万+
前言 有时候我们需要对各种数值进行保留位数，以便于更好的展示。 Html部分 template中这样使用，需要处理的字段名，再加上过滤器方法 <div class="text primary-text"> <span>合计：</span> <span class="money">￥{{totalMoney | numFilter}}<...
Vue 保留两位小数
宁夏前端工程师，马卫斌，wx：1457508895
03-10 9171
methods: { // 截取当前数据到小数点后两位 numFilter(value) { const realVal = parseFloat(value).toFixed(2); return realVal; }, }
vue保留两位小数
piaocanY的博客
11-15 1878
@keydown.native="handleInput2" handleInput2 (e) { e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null console.log(e.target.value); },
Vue中如何对数值进行保留小数点后两位？
一个勤勤恳恳的程序猿
11-01 1万+
// 截取当前数据到小数点后两位 （四舍五入） let realVal = parseFloat(value).toFixed(2) // 先截取当前数据到小数点后三位 （不会四舍五入） let tempVal = parseFloat(value).toFixed(3) // 再取该数值长度-1的内容 let realVal = tempVal.substring(0, tempVal.length - 1) ...
vue 保留2位小数
qq_38946996的博客
11-01 1193
保留小数，fractionDigits值写2就是保留两位小数。 toFixed(number, fractionDigits) { //number 保留小数数 //fractionDigits 保留小数位数 var times = Math.pow(10, fractionDigits); var roundNum = Math.round(number * times) / times; return roundNum.toFixed(fractionDigits); },.
vue实现input输入框保留两位小数
00年女程序员分享自己的学习笔记
07-25 7818
toFixed()方法可把Number四舍五入为指定小数位数的数字。 forEach() 是前端开发中操作数组的一种方法，主要功能是遍历数组，其实就是for循环的升级版，JSON 对象使用在大括号 {...} 中书写。 对象可以包含多个 **key/value（键/值）**对。parseFloat()函数 可解析一个字符串，并返回一个浮点数。input输入框的值进行四舍五入保留两位小数。.........
Vue中对数值进行保留小数点后两位的处理
热门推荐
xiawenyi1234的博客
08-15 3万+
废话不多说，上代码 vue渲染页面时，处理后台返还的数据！ <div class="text primary-text"> <span>合计：</span> <span class="money">￥{{totalMoney | numFilter 这里是下面对应的值}}</span> </div> toFixed方...
JavaScript正则表达式完全指南
"经典正则表达例子" 正则表达式是计算机科学中的一个重要概念，它源于1956年神经网络的研究，并由UNIX之父肯·汤普森引入到编程领域，用于文本处理和模式匹配。正则表达式是一种强大的工具，能够描述一系列字符串的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值