regexp小例子

regexp的匹配内容的替代

$选择符是在替换的时候进行的标志或选择，但是如果在正则表达式本身，就要使用\选择了

分组捕获，使用()进行数据分组，编号0代表整个匹配项，选择的分组从1号开始

1
2
//$1, $2代表的是匹配的第一个和第二个分组， 这里相当于调换了两个分组的位置
'guizhun tu'.replace(/(\w+)\s(\w+)/, '$2 $1')   //tu guizhun

\用在正则表达式自己身上

1
2
3
4
5
6
7
var s = 'aaabbbcccaaabbbaaa';
var a = s.split('').sort().join("");  //"aaaaaaaaabbbbbbccc"
var ans = a.match(/(\w)\1+/g);    //\1代表第一个分组匹配的内容， 这里 (\w)\1 相当于两个相同的字符
ans.sort(function(a,b) {
    return a.length - b.length;
})
console.log('ans is : ' + ans[ans.length-1])

trim方法模拟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 1. 提取中间关键字符, 使用的分组引用
const trim1 = (str) => {
  return str.replace(/^\s*(.*?)\s*$/, '$1')
}
// 2. 去掉开头和结尾的空字符
const trim2 = (str) => {
    return str.replace(/^\s*|\s*$/g, '')
}


#### 首字母大写
```js
const titleize = (str) => {
  return str.toLowerCase().replace(/(?:^|\s)\w/g, (c) => c.toUpperCase())
}  

console.log(titleize('my name is epeli')) // My Name Is Epeli

// 拓展，横向转驼峰，例如base-act-tab => baseActTab
'base-act-tab'.replace(/(?:-)(\w)/g, ($0, $1) => $1.toUpperCase()) // baseActTab

html转义规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const escapeHTML = (str) => {
    const escapeChars = {
    '<': 'lt',
    '>': 'gt',
    '"': 'quot',
    ''': '#39',
    '&': 'amp'
  }
  
  let regexp = new RegExp(`[${Object.keys(escapeChars).join('')}]`, 'g') // 为了得到字符组[<>"'&]
    
    return str.replace(regexp, (c) => `&${escapeChars[ c ]};`)
}

console.log( escapeHTML('<div>Blah blah blah</div>')) // &lt;div&gt;Blah blah blah&lt;/div&gt;

反转义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const unescapseHTML = (str) => {
    const htmlEntities = {
    nbsp: ' ',
    lt: '<',
    gt: '>',
    quot: '"',
    amp: '&',
    apos: '''
  }
  
  return str.replace(/&([^;]+);/g, ($0, $1) => {
        return htmlEntities[ $1 ] || ''
    })
}

console.log(unescapseHTML('&lt;div&gt;Blah blah blah&lt;/div&gt;')) // <div>Blah blah blah</div>

匹配成对标签

1
2
3
4
let reg = /<([^>]+)>.*?</\1>/g

console.log(reg.test('<title>regular expression</title>')) // true
console.log(reg.test('<p>laoyao bye bye</div>')) // false