Java全栈学习：JavaScript---正则表达式

最新推荐文章于 2023-04-08 17:54:54 发布

Listener-1379

最新推荐文章于 2023-04-08 17:54:54 发布

阅读量119

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45965358/article/details/114236335

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章目录

一.概述
二.常见的正则表达式
三.创建正则表达式对象
四.实例
五.扩展字符串

一.概述

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

二.常见的正则表达式

. 匹配除了换行符以外的所有字符。
\w 匹配字母或数字或下划线或者汉字
\s 匹配任意的空白字符
\d 匹配数字
\b匹配单词的开始或者结束
^ 匹配字符串的开始
$ 匹配字符串的结束

* 重复0次或者更多次
+ 重复一次或者更多次
？ 重复0次或者1次
{n}重复n次
{n,}重复n次或者更多次
{n,m}重复n次到m次

\W 匹配不是字母或数字或下划线或者汉字
\S 匹配不是空白字符
\D 匹配不是数字
\B 匹配不是单词的开始或者结束
{^x} 匹配除了x以外的任意字符
{^aeiou}匹配除了aeiou外的字符

[0-9] 表示0-9之间的数字
[a-z] 表示a-z之间的字母
[A-Za-z0-9] 表示A-Za-z0-9中的任意一个字符

三.创建正则表达式对象

第一种创建方式

var regExp = /正则表达式/flags;

第二种创建方式—使用内置支持类RegExp

var regExp = new RegExp("正则表达式","flags");

flags是修饰符
在这里插入图片描述

四.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        window.onload = function(){
            document.getElementById("button1").onclick = function(){
                var Elt = document.getElementById("text").value;
                var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                var ok = regExp.test(Elt);
                if(!ok){
                    document.getElementById("error").innerText = "邮箱地址不合法";
                }
                else{
                    document.getElementById("error").innerText = "邮箱地址合法";
                }
            }
        }
    </script>
    <input type = "text" id = "text"/>
    <span  style = "color:red ; font-size:12px" id = "error"></span>
    <br/>
    <input type = "button" id = "button1" value = "emailButton"/>
</body>
</html>

在这里插入图片描述
我们可以改进一下，当鼠标在文本框中要输入时，不会出现提示按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        window.onload = function(){
            document.getElementById("button1").onclick = function(){
                var Elt = document.getElementById("text").value;
                var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                var ok = regExp.test(Elt);
                if(!ok){
                    document.getElementById("error").innerText = "邮箱地址不合法";
                }
                else{
                    document.getElementById("error").innerText = "邮箱地址合法";
                }
                document.getElementById("text").onfocus = function(){
                    document.getElementById("error").innerText = "";
                }
            }
        }
    </script>
    <input type = "text" id = "text"/>
    <span  style = "color:red ; font-size:12px" id = "error"></span>
    <br/>
    <input type = "button" id = "button1" value = "emailButton"/>
</body>
</html>

五.扩展字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        window.onload = function(){
            document.getElementById("button1").onclick = function(){
                var textvalue = document.getElementById("text1").value;
                var textvalue1 = textvalue.trim();
                document.getElementById("text1").onclick = alert("--->" + textvalue1 + "<---");
            }
        }
    </script>
    <input type = "text" id = "text1"/>
    <input type = "button" value = "button"  id = "button1"/>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
虽然现在的浏览器一般都可以兼容trim（）函数，但是一些版本较低的浏览器没有trim()函数，于是我们想到能不能我们自己写一个这样的函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        String.prototype.trim = function(){
            return this.replace(/^\s+/,"").replace(/\s+$/,"");
        }
        window.onload = function(){
            document.getElementById("button1").onclick = function(){
                var textValue = document.getElementById("text1").value;
                var textValue1 = textValue.trim();
                document.getElementById("text1").onclick = alert("--->" + textValue1 + "<---");
            }
        }
    </script>
    <input type = "text" id = "text1"/>
    <input type = "button" value = "button"  id = "button1"/>
</body>
</html>

我们发现重写后，与原函数有同样的效果。

Listener-1379

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Java全栈学习：JavaScript---正则表达式

文章目录一.概述二.常见的正则表达式三.创建正则表达式对象四.实例五.扩展字符串一.概述正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。二.常见的正则表达式. 匹配除了换行符以外的所有字符。\w 匹配字母或数字或下划线或者汉字\s 匹配任意的空白字符\d 匹配数字\b匹配单词的开始或者结束^ 匹配字符串的开始$ 匹配字符串的结束* 重复0次或者更
复制链接

扫一扫

专栏目录