IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript(4):正则表达式 -> 正文阅读

[JavaScript知识库]JavaScript(4):正则表达式

  很多编程语言都有正则表达式,JavaScript也不例外,用于模式匹配和替换,它有很多的应用。

  学习网址:https://regexr.com/,可以在这个网站上一边测试一边总结。

一、做什么用

  常见的应用有:

  ① 测试给定字符串或者文档的模式。

  例如,是否是手机号码、邮件地址、IP地址?或者密码强度的检测,或者给定字符串中是否包含了指定的字符串等等。这个统称为数据有效性验证。

  ② 替换指定的文本。可以在字符串或者文档中使用一个正则表达式来标定特定文字,然后对其进行操作,比如将其删除或者替换为别的文字。

  ③ 根据模式匹配从字符串或者文档中提取一个子字符串。

  简单地说,就是用来在文本或输入文档查找特定文字,就是针对给定字符串或者文档进行准确定位并进行操作的一个工具。

  在JavaScript中,进行这样的操作函数并不少,但如果追求效率或者效果来说还是应用正则表达式来得快捷和轻松,稍作比较就有体会。

  实际上,写程序都差不多,大部分时间段都是站在别人的肩膀之上的,对于程序开发来说是这样,对项目管理也一样的。

二、怎么用

  先创建正则表达式对象,然后再使用。

  ①字面量方式

  JavaScript代码:

????????var regEx=/javaScript/g;//创建规则

????????var str="JavaScript";

????????var isMatch=regEx.test(str);//验证给定的字符串是否符合规则

????????if (isMatch){

????????????console.log("匹配!");

????????}

????????else{

????????????console.log("不匹配!");

????????} ???????

  ②创建对象方式

????????var regEx=new RegExp('JavaScript','g');//创建对象并声明规则

????????var str="JavaScript";

????????var isMatch=regEx.test(str);//验证给定的字符串是否符合规则

????????if (isMatch){

????????????console.log("匹配!");

????????}

????????else{

????????????console.log("不匹配!");

????????} ???????

  上面的两段代码只有一行有差别,就是创建正则表达式对象的方式不同。

  字面量的创建方式是一般推荐采用的方式。

  var regEx=/pattern/flag;//以字面量方式创建

  var regEx=new RegExp('pattern','flag');以构造函数方式创建

三、语法细节

  正则表达式是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为“元字符”)。模式描述在搜索文本时要匹配的一个或多个字符串。

关键在于理解元字符,就是用于与普通字符结合来标识规则的字符。

  【1】正则表达式语法:/正则表达式/修饰符

  修饰符:可选,有三个。

  i 对大小写不敏感的匹配。

  g 执行全局匹配(匹配所有字符而不是在找到第一个匹配后停止)。

  m 多行匹配。

  元字符及其含义:

?

?

?

?

?

  注:汉字的UTF-8的编码是从19968~40869,共20901个字符,正则表达式为\u4e00-\u9fa5。

  ^在字符集合内表示取反的意思。比如:

  ①应用/[0-9a-z]/g去匹配JS@Vue#2021-10-4#php.JS,则为JS@Vue#2021-10-4#php.JS,即只匹配了数字和小写字母;

  ②应用/[^0-9a-z]/g去匹配JS@Vue#2021-10-4#php.JS,则为JS@Vue#2021-10-4#php.JS,即匹配了除数字和小写字母之外的字符。

  RegExp.$1,RegExp.$2

  具体匹配次数的完整表达为{m,n},即匹配次数在m~n之间。

  {0,1},即与?表达意思相同。

  {1,},即与+表达意思相同。

  {0,},即与*表达意思相同。

  【2】正则表达式对象的方法

  ① test,返回一个Boolean值,它指出在被查找的字符串中是否存在匹配。如果存在匹配则返回 true,否则就返回 false。

  ② exec,用正则表达式模式在字符串中进行查找,并返回包含该查找结果的一个数组。

  ③ compile,把正则表达式编译为内部格式,从而执行得更快。

  【3】String对象与正则表达式相关的方法

  ① match,找到一个或多个正则表达式的匹配。

  ② replace,替换与正则表达式匹配的子串。

  ③ search,检索与正则表达式相匹配的值。

  ④ split,把字符串分割为字符串数组。

四、典型应用

  正则表达式看似复杂,做一下练习就会有不一样的体会。

  源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的正则表达式</title>
    <style>
        input[type="text"] {
	        font-size: 15px;
            width: 650px;
        }
        textarea {
	        font-size: 15px;
        }
    </style>
</head>
<body onload="init()">
        源文本描述:<textarea cols="79" rows="6" id="srcTXT"></textarea><br>
        正则表达式:<input type="text" id="regExTXT" /><br>
        匹配的结果:<textarea cols="79" rows="6" id="destTXT"></textarea><br>
</body>
<script>
    function init(){
        var str="JavaScript is an interpretative scripting language, which originated in 1995.\n";
        str=str+"It is a popular scripting language at present.\n";
        str=str+"It is different from Java.\n";
        str=str+"Many programmers like JavaScript.\n";
        str=str+"学习正则表达式网址:https://regexr.com/ 或 https://www.runoob.com/?s=正则表达式";
        var srcDes=document.getElementById("srcTXT");
        srcDes.value=str;

        var re=/Script|script/g;
        var regExDes=document.getElementById("regExTXT");
        regExDes.value="/"+re.source+"/"+re.flags;

        var DestDes=document.getElementById("destTXT");
        var matchResult=str.match(re);
        if(re.test(str)){
            for(var i=0;i<matchResult.length;i++){
            DestDes.value=DestDes.value+matchResult[i]+"\n";
            }
            DestDes.value=DestDes.value+"匹配了"+matchResult.length+"次。";
        }else{
            DestDes.value="没有匹配!";
        }
    }
</script>
</html>

  结果图:

?  上面的代码可以检测出匹配的次数,假如想知道是哪些匹配,只需要更改正则表达式即可。

var?re=/\w+Script|script\w+/g;

  结果图:

?  尝试着做了下面的练习:

  还可以有很多,在于一点一滴的积累。这样做好处明显,把日常写好的正则表达式记录下来,以后就可以直接使用了。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-07 13:45:45  更:2021-10-07 13:48:03 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 23:26:47-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码