正则中的捕获圆括号的妙用
6.捕获圆括号的妙用
===============
**知识点**
1. 捕获圆括号
2. 可以replace()中使用的特殊字符
--------------------------------------------------------
1.捕获圆括号
----------
- 匹配字符串的特定模式
- 还可以稍后引用匹配到的子字符串
- 从左到中,使用 `$1, $2...`顺序引用
--------------------------------------------------------
2.可以replace()中使用的特殊字符
---------------------------
- `$$`: 允许替换中的字符包含一个字面值'$'
- `$&`: 插入匹配到的子字符串
- '$`': 在匹配之前插入字符串的一部分
- `$'`: 在匹配之后插入字符串的一部分
- `$n`: 插入使用RegExp的第n次捕获圆括号的值
--------------------------------------------------------
### 示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用正则捕获组实现内容交换</title>
</head>
<body>
<script>
var name = 'Peter Zhu';
var reg = /^(\w+)\s(\w+)$/;
var newName = name.replace(reg, '$2, $1');
console.log('newName: ' + newName);
// 使用正则对象的exec(),也可以实现同样的功能
var name = 'Peter Zhu';
var reg = /^(\w+)\s(\w+)$/;
var result = reg.exec(name);
console.log(result);
console.log(result[0]);
console.log(result[1]);
console.log(result[2]);
console.log(result.index);
console.log(result.input);
var newName = result[2] +', ' + result[1];
console.log('newName: ' + newName);
</script>
</body>
</html>
```
### 改写原查询字符并描红的案例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用捕获组改写关键字查询案例</title>
</head>
<body>
<label for="text">内容区</label><br>
<textarea name="" id="text" cols="50" rows="10"></textarea>
<p>
<label for="keywords"></label>关键字:<input type="text" id="keywords" placeholder="支持正则">
<button id="search">搜索</button>
</p>
<div id="result"></div>
<script>
var btn = document.getElementById('search');
btn.onclick = function () {
// 获取要搜索的关键字做为正则模式
var pattern = document.getElementById('keywords').value;
var reg = new RegExp(pattern, 'g');
// 获取要查询的全部字符文本
var searchStr = document.getElementById('text').value;
// 替换字符串,$& 表示查询到的子字符串
var str = '<span style="color:red">$&</span>';
// 将查询结果插入到页面中
document.getElementById('result').innerHTML = searchStr.replace(reg, str);
// 注: 实际开发中, 被搜索的内容,应该来自数据库
}
</script>
</body>
</html>
```
