正则匹配替换

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

整理了工作中用到的一些正则匹配。

去除空格

1
2
3
4
5
6
7
8
9
10
// 仅去除前面的空格 ltrim
var reg = /^\s+/;
str.replace(reg, '')

// 仅去除后面的空格 rtrim
var reg = /\s+$/;
str.replace(reg, '')

// 去除前后空格 trim
var reg = /^\s+|\s+$/g

关键字匹配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 转义正则表达式特殊字符
const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")

const keyword = "):"
const text = "I feel so bad ):"

// 如果关键字中包含正则表达式特殊字符，需将其转义再创建正则表达式
const escapeKeyword = escapeRegExp(keyword)

// 根据关键字拆分字符串
const splits = text
  .split(new RegExp(`(${escapeKeyword})`, "i"))
  .filter(s => s !== "")

// ["I feel so bad ", "):"]

html标签

去掉所有的html标签

1
str.replace(/<[^>]+>/g,'')

去掉所有的html标签，img标签除外

1
str.replace(/<(?!img).*?>/g, '')

去掉所有的html标签，img和p标签除外

1
str.replace(/<(?!img|p|\/p).*?>/g, '')

提取img标签

1
str.match(/(<img(?!.*?alt=(['"]).*?\2)[^>]*)(>)/g)

匹配p标签及内部内容

1
str.replace(/<p>[\s\S]*?<\/p>/g, '')

匹配html table td 内的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const html = '<table><tbody><tr><td class="et1" height="19" width="109">3766</td><td class="et1" height="19" width="100">110000</td><td class="et1" height="19" width="132" >北京</td><td class="et1" height="19" width="121">116.3809433</td><td class="et1" height="19" width="135">39.9236145</td></tr><tr><td class="et1" height="19" width="109" >3783</td><td class="et1" height="19" width="100">120000</td><td class="et1" height="19" width="132">天津</td><td class="et1" height="19" width="121">117.2034988</td><td class="et1" height="19" width="135">39.13111877</td></tr></tbody></table>'

// 匹配tr
const trReg = /<tr[^>]*>([\S\s]*?)<\/tr>/gi

// 匹配td
const tdReg = /<td[^>]*>([\S\s]*?)<\/td>/gi

const results = []

html.replace(trReg, function(match, $1) {
    // 保存td的内容 
    const tdContents = []

    $1.replace(tdReg, function(m, p1) {
        tdContents.push(p1)
    }, '');

    const obj = {
        name: tdContents[2],
        log: tdContents[3],
        lat: tdContents[4]
    }
    results.push(obj)
}, '');

console.log(results)
/*
{
  lat: "39.9236145",
  log: "116.3809433",
  name: "北京"
},
{
  lat: "39.13111877",
  log: "117.2034988",
  name: "天津"
}
*/

提取url链接

1
2
3
4
5
6
7
8
const urlPattern = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi

const str = 'this is my friend website http://example.com I think it is cool\n\nbaidu website https://www.baidu.com baidu website'

const urls = str.match(urlPattern)

console.log(urls)
// ["http://example.com", "https://www.baidu.com"]

提取url所有参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function getUrlParameters(url) {
    if(!url || typeof url !== 'string') {
      url = window.location.href
    }
    // 使用 /\?([^/?#:]+)#?/ 正则来匹配 ? 与 #（#为位置标识符）之间的非/?#:字符
    // 或使用
    const queryString = url.match(/\?([^/?#:]+)#?/)?.[1]

    if (!queryString) {
        return {}
    }

    const queryObj = queryString.split('&').reduce((params, block) => {
        // 如果未赋值，则默认为空字符串
        const [k, v = ''] = block.split('=')
        params[k] = decodeURIComponent(v)
        return params
    }, {})
    return queryObj
}
1
2
3
// #section为位置标识符
getUrlParameters('http://localhost:3245/#/crm/extension/?time=2020-05-20&key=test#section')
// {time: "2020-05-20", key: "test"}

删除url中的某个参数

1
2
3
4
5
6
7
8
9
10
11
12
function removeUrlParameter(url, key) {
    if (url && key) {
        const reg = new RegExp(`(\\?|&)${key}=[^&]*(&)?`, 'g')
        return url.replace(reg, ($0, $1, $2) => {
            if ($1 === '?') {
                return $2 ? $1 : ''
            }
            return $2 || ''
        })
    }
    return url
}
1
2
3
4
5
// example
const url = 'https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MevgokpcQTweUDIqAPCfxddq3pupiculy78Xhaf2espb72fRB35EibxfxUTFickBvwSyFKpx56dnoA3SYw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1'

console.log(removeUrlParameter(url, 'wx_fmt'))
// "https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MevgokpcQTweUDIqAPCfxddq3pupiculy78Xhaf2espb72fRB35EibxfxUTFickBvwSyFKpx56dnoA3SYw/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1"

URL追加参数

1
2
3
4
5
6
function insertParam(url, key, value) {
    if (url && typeof url === 'string') {
        url += `${url.match(/[\\?]/g) ? '&' : '?'}${key}=${encodeURIComponent(value)}`
    }
    return url
}
1
2
3
4
// example
const url = 'http://www.example.com?page=1'
insertParam(url, 'limit', 10)
// "http://www.example.com?page=1&limit=10"

删除URL最后一个斜杆

1
2
3
4
5
6
7
8
function removeTrailingSlashes(url) {
    return url.replace(/\/+$/, '')  // Removes one or more trailing slashes from URL
}

var url = ''http://www.example.com/demo/"

removeTrailingSlashes(url)
// "http://www.example.com/demo"

金钱千分位

1
2
3
4
const money = '102590.45'

const format = money.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
// "102,590.45"

匹配@

1
2
3
4
5
6
7
const str = '快来@随便起的昵称 @昵称1 @昵称2 就等你们了@昵称3 @昵称4'

const reg = /@([a-zA-Z0-9_\-\u4E00-\u9FA5]+)/g

const html = str.replace(reg, function(match, p1){
  return `<a href="/user/home?nickname=${window.encodeURI(p1)}">${match}</a>`
})

单词边界

1
var str = "    it's mine and you can't have it. ";

首字母大写

1
2
const str1 = str.replace(/\b\w/, s => s.toUpperCase());
// "    It's mine and you can't have it. " "

单词首字母大写

1
2
3
4
const str2 = str.replace(/\w\S*/g, (s) => {
  return s.replace(/^\w/, (c) => c.toUpperCase())
});
// "    It's Mine And You Can't Have It. "

/\b\w/g会把英文缩写it's和can't拆成两部分，所以不能使用\b。