gjincai / blog Goto Github PK
View Code? Open in Web Editor NEWblog
blog
标签:笔记
javascript
正则表达式
详细文档:MDN web docs
在线编辑:codepen
定义正则:2种写法
/正式表达式/修饰符
, eg: const re = /a/i
new RegExp('正则表达式', '修饰符')
, eg: const re = new RegExp('a', 'i')
常用修饰符
语法 | 说明 |
---|---|
\w | 单词,匹配任何ASCII单字节[a-zA-Z0-9] |
\W | 非单词,[^a-zA-Z0-9] |
\d | 数字,匹配任何数字[0-9] |
\D | 非数字,[^0-9] |
\s | 空白,匹配任何Unicode空白符[ \t\v\n\r\f] |
\S | 非空白 |
[...] | 单词 |
[^...] | 非单词 |
特殊符号/字符需要 /
转义
特殊符号:! $ ^ * + = | . ? \ / ( ) [ ] { }
特殊字符:o t n f r xnn uxxxx cX
量词,重复类
语法 | 说明 |
---|---|
{n} | 匹配前一项n次 |
{n,} | 匹配前一项至少一次 |
{n,m} | 匹配前一项至少n次,最多m次 |
{?} | 匹配前一项0次或1次,等价:{0,1} |
{+} | 匹配前一项至少一次,等价:{1,} |
{*} | 匹配前一项0次或多次,等价:{0,} |
分隔符,定位符
const re = /a|b/i
,a或者b^
: 匹配字符串开头,eg: const re = /^a/i, 字符串以a开头$
: 匹配字符串结尾,eg: const re = /a$/i, 字符串以a结尾\b
: 匹配一个单词的边界\B
: 匹配一个单词的非边界注意:方括号中的^
, [^abc]
,表示是一个除 a,b,b 之外的任意一个字符。
分组
(...)
: 将几个项目组合成一个单元
a+,表示“a”字符连续出现至少一次
(ab)+,表示"ab"两个字符连续出现多次
const re = /(\d{4})-(\d{2})-(\d{2})/i
const str = "2017-06-12"
console.log(str.match(re)) // ["2017-06-12", "2017", "06", "12"]
console.log(str.replace(re, '$1/$2/$3')) // "2017/06/12"
对象属性/标志
i
: 匹配时不区分大小写,ignoreCase
g
: 匹配时执行全局匹配,global,无g时,匹配到第一个即停止向下匹配
m
: 匹配时执行多行匹配,
对象方法
RegExp方法:
exec()
: 一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回null)test()
: 一个在字符串中测试是否匹配的RegExp方法,它返回true或falsetoString()
: 将RegExp对象转换成字符串String方法:
match
: 返回一个数组或者在未匹配到时返回nullsearch
: 返回匹配到的位置索引,或者在失败时返回-1replace
: 使用替换字符串替换掉匹配到的子字符串split
: 分隔后的子字符串存储到数组中const re1 = /abc/i
const re2 = /abc/ig
const str = 'wwwabcdefabcdefabcdef'
const result1 = str.match(re1) // ["abc"]
const result2 = str.match(re2) // ["abc", "abc", "abc"]
const result3 = str.search(re1) // 3
const result4 = str.replace(re1, '-') // "www-defabcdefabcdef"
const result5 = str.replace(re2, '-') // "www-def-def-def"
const result6 = str.split(re1) // ["www", "def", "def", "def"]
function trim(str) {
return str.replace(/^\s+|\s+$/g, '')
}
function trimAll(str) {
return str.replace(/\s+/g, '')
}
console.log(trim(" a b c ")); // "a b c"
console.log(trimAll(" a b c ")); // "abc"
[1-9]{1}
/ [1-9]
[0-9]{4,14}
/[1-9][0-9]{4,14}/
, 012345,123456789123456789,这2个数字都有符合的片段,但不是合法qq号const re = /^[1-9][0-9]{4,14}$/
const str = 12345
const result = re.test(str) // true
// const re = /^1(3|4|5|7|8){1}([0-9]{9})$/
const re = /^1[3|4|5|7|8][0-9]{9}$/
const str = 13011760730
const result = re.test(str) // true
let htmlStr = '<div style="min-width: 1200px;"><video class="videobg" autoplay="autoplay" loop="loop" width="200px" height="100px"><source src="http://download.test.com/video/bgv9.webm"></video><img src="images/02.gif"/></div>'
const re1 = /<video[^>]*>[\s\S]*<\/[^>]*video>/gi
htmlStr = htmlStr.replace(re1, function (str) {
return '<a href="javascript:;" class="my-class">视频链接</a>'
})
const re2 = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi
htmlStr = htmlStr.replace(re2, '<img src="my-default.png"/>')
// "<div style='min-width: 1200px;'><a href='javascript:;' class='my-class'>视频链接</a><img src='my-default.png'/></div>"
// const re2 = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi
// htmlStr = htmlStr.replace(re2, '<img src="$1?test=123"/>')
// // "<div style='min-width: 1200px;'><a href='javascript:;' class='my-class'>视频链接</a><img src='images/02.gif?test=123'/></div>"
console.log(htmlStr)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.