Jadual Kandungan
正则分组
重复匹配
后向引用(反向引用)
正则断言
先行断言
后发断言
实践
"正负"断言
Rumah hujung hadapan web tutorial js JS正则表达式要点分析

JS正则表达式要点分析

Jan 30, 2018 pm 05:20 PM
javascript menganalisis ungkapan

本文主要和大家分享JS正则表达式的要点,由于之前在看VueJS的源码, 看到了HtmlParser部分, 感觉以前看的正则表达式基础知识已经完全不够用了, 现翻阅博客资料, 将一些JS中正则表达式难用的部分总结归纳, 方便自己和sf友翻阅.

正则分组

重复匹配

对于重复的匹配, 我们经常使用到正则表达式的分组功能, 我们使用正则匹配IP地址来实践一下.

假设我们要匹配的IP地址在区间 0.0.0.0 - 255.255.255.255 之间, 可以直观的了解到, 我们只需要匹配 三位数字+点号 三遍, 再匹配三位数字一遍就可以了.

这里说的 三位数字+点号 既是我们说的一种规则, 我们可以在表达式中将它们转化为规则即: \d{1,3}\., 当我们把规则用括号包装后, 就变成了组: (\d{1,3}\.), 所以匹配IP地址的正则表达式可以写作: (\d{1,3}\.){3}\d{1,3}

换种思路, 我们也可以这样匹配: \d{1,3}(\.\d{1,3}){3}

拓展: 聪明的你可能已经想到, \d{1,3} 匹配是有疏漏的. 在实际生产过程中, \d{1,3} 可能匹配 999 这种数字, 他是一个错误的IP地址段. 这里贴上真实的IP地址正则匹配供大家参考: ((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))) , 另人愉快的是, 它使用的分组策略仍然是不变的.

后向引用(反向引用)

我们考虑一个很特殊的情况, 当我们要匹配四个IP段相同的情况, 如 100.100.100.100 时, 重复匹配分组的策略失效了: 重复匹配分组 并不能保证匹配相同的数字 -> 这时候我们需要借助 后向引用 策略的力量了(少年, 你渴望力量吗2333, 戳我头像, 带你探索音乐与代码交织的文艺道路.)

后向引用在不同语言的正则表达式书写中, 有不同的语法, 我们讨论JS中最常见的一种, 形如: \number 的后向引用, 其中, number 代表分组的序号.

给你一个简单的栗子, 瞬间就记住了, 假使我们要匹配重复的三位数字, 我们将匹配一个数字的规则标记为一个分组: (\d), 重复匹配这个分组(第一个分组)的具体内容三次: (\d)\1, 这样就达到了目的.

我们很容易将重复匹配和后向引用分别开来: 前者是重复匹配相同的规则, 后者是匹配分组的具体内容.

默认的一些规则需要稍加理解并记住:

  • \0代表的是, 整个正则表达式的匹配的内容

正则断言

还记得我看过的一篇大概名为<30分钟学会正则表达式>的文章中, 里面提及过正则断言.
当时感觉真是一看就懂. 但很遗憾, 实际生产中, 使用各种复杂正则表达式的情况实在是太少, 今天如果不翻阅百度, 我恐怕是不能记起断言的分类和各种使用方法了.

断言的字面意思便是, 断定(程序)运行到此时(结果)是这样的"场景", 它描述的是一种 场景, 换句话说, 是一种"肯定的场景". 但要记住的是, 我们的"结果"是不包含在"场景"里面的.

VueJS里头需要匹配HTML tag, 我们就以匹配: 'Not Fault' 中的 'Not Fault' 为例吧.

我们如果使用普通的正则表达式, 如 /<segment>.*</segment>/ 会匹配到整个字符串 'Not Fault'. 我们使用断言, 以"场景"的方式思考: '' 和 '' 是一种"肯定的场景", 我们需要匹配的结果是: 'Not Fault', 无论tag内部的字符无论如何变化, tag头和tag尾都是不变的.

一鼓作气, 我们继续往下

先行断言

先行断言, 我是这样理解的: 先匹配内容, 再做"场景"假设.

放到我们先前的栗子中, 便这样匹配, 一直匹配内容, 直到碰上 '' 的场景, 语法如下: (?=</segment>)

后发断言

后发断言, 我的理解是: 先匹配场景, 再匹配内容.

放到我们先前的栗子中, 先匹配 '' 的场景, 再继续往下匹配内容, 语法如下: (?<=<segment>)

实践

正则表达式是对字符串内容做匹配, 所以我将"先"和"后"的理解绑定到内容匹配的先后顺序上, 方便理解.

我们将先行断言和后发断言结合起来, 整个表达式如下: (?<=<segment>).*(?=</segment>), 我们便可获得想要的结果: 'Not Fault' 了.

"正负"断言

其实我们刚才做的是肯定的场景, 实际情况中还有"不满足此场景"的使用场景.

比如, 我们刚才使用的表达式: (?<=<segment>).*(?=</segment>) 是肯定有 '' '' 的场景下去匹配内容, 其实是使用的 "正后发断言" 和 "正先行断言", "正"即代表肯定的状态.

那负断言, 也就是不满足场景的断言咯... 语法即把正断言中的等于号换成感叹号:

  • 负先行断言 (?!)

  • 负后发断言 (?<!)

如: ['1999','2099','2199'...'9099'] 中如果我们要匹配除了'1999'以外的所有带有'99'结尾的年份, 我们可以使用表达式: (?<!19)99

相关推荐:

JavaScript正则表达式常用基本语法

猪哥深谈php正则表达式及正则表达式都用在什么地方?

JS基于正则表达式实现的密码强度验证功能示例_javascript技巧


Atas ialah kandungan terperinci JS正则表达式要点分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata Dec 17, 2023 pm 05:30 PM

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Dec 17, 2023 pm 05:13 PM

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Analisis sebab mengapa direktori sekunder DreamWeaver CMS tidak boleh dibuka Analisis sebab mengapa direktori sekunder DreamWeaver CMS tidak boleh dibuka Mar 13, 2024 pm 06:24 PM

Tajuk: Analisis sebab dan penyelesaian mengapa direktori sekunder DreamWeaver CMS tidak boleh dibuka Dreamweaver CMS (DedeCMS) ialah sistem pengurusan kandungan sumber terbuka yang berkuasa yang digunakan secara meluas dalam pembinaan pelbagai laman web. Walau bagaimanapun, kadangkala semasa proses membina tapak web, anda mungkin menghadapi situasi di mana direktori sekunder tidak boleh dibuka, yang membawa masalah kepada operasi biasa tapak web. Dalam artikel ini, kami akan menganalisis kemungkinan sebab mengapa direktori sekunder tidak boleh dibuka dan memberikan contoh kod khusus untuk menyelesaikan masalah ini. 1. Analisis sebab yang mungkin: Masalah konfigurasi peraturan pseudo-statik: Semasa penggunaan

Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Jan 05, 2024 pm 01:37 PM

Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut

Analisis sama ada bahasa pengaturcaraan utama Tencent ialah Go Analisis sama ada bahasa pengaturcaraan utama Tencent ialah Go Mar 27, 2024 pm 04:21 PM

Tajuk: Adakah bahasa pengaturcaraan utama Tencent Go: Analisis mendalam Sebagai syarikat teknologi terkemuka di China, Tencent sentiasa menarik banyak perhatian dalam pilihan bahasa pengaturcaraannya. Dalam beberapa tahun kebelakangan ini, sesetengah orang percaya bahawa Tencent menggunakan Go sebagai bahasa pengaturcaraan utamanya. Artikel ini akan menjalankan analisis mendalam sama ada bahasa pengaturcaraan utama Tencent ialah Go dan memberikan contoh kod khusus untuk menyokong pandangan ini. 1. Aplikasi bahasa Go dalam Tencent Go ialah bahasa pengaturcaraan sumber terbuka yang dibangunkan oleh Google Kecekapan, kesesuaian dan kesederhanaannya disukai oleh banyak pembangun.

Menganalisis kelebihan dan kekurangan teknologi kedudukan statik Menganalisis kelebihan dan kekurangan teknologi kedudukan statik Jan 18, 2024 am 11:16 AM

Analisis kelebihan dan had teknologi penentududukan statik Dengan perkembangan teknologi moden, teknologi penentududukan telah menjadi bahagian yang amat diperlukan dalam kehidupan kita. Sebagai salah satu daripadanya, teknologi kedudukan statik mempunyai kelebihan dan batasannya yang unik. Artikel ini akan menjalankan analisis mendalam tentang teknologi kedudukan statik untuk lebih memahami status aplikasi semasa dan aliran pembangunan masa depannya. Mula-mula, mari kita lihat kelebihan teknologi kedudukan statik. Teknologi kedudukan statik mencapai penentuan maklumat kedudukan dengan memerhati, mengukur dan mengira objek yang akan diletakkan. Berbanding dengan teknologi penentududukan lain,

Bagaimana untuk melaksanakan sistem tandatangan elektronik dalam talian menggunakan WebSocket dan JavaScript Bagaimana untuk melaksanakan sistem tandatangan elektronik dalam talian menggunakan WebSocket dan JavaScript Dec 18, 2023 pm 03:09 PM

Gambaran keseluruhan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tandatangan elektronik dalam talian: Dengan kemunculan era digital, tandatangan elektronik digunakan secara meluas dalam pelbagai industri untuk menggantikan tandatangan kertas tradisional. Sebagai protokol komunikasi dupleks penuh, WebSocket boleh melakukan penghantaran data dua hala masa nyata dengan pelayan Digabungkan dengan JavaScript, sistem tandatangan elektronik dalam talian boleh dilaksanakan. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk membangunkan dalam talian yang mudah

See all articles