获取满足条件的内容并描红结果(二)
5.获取满足条件的内容并描红结果
========================
**知识点**
1. new RegExp()
2. reg.exec()
3. reg.lastIndex
--------------------------------------------------
1.new RegExp()
--------------
- *正则构造函数*: 创建一个正则对象
- new RegExp('正则表达式','模式符')
--------------------------------------------------
2.reg.exec()
============
- 正则对象上调用该方法,每次执行返回一个包括三个元素的数组
+ `array[0]`: 是查询结果字符串
+ `array.index`: 结果字符串起始索引
+ `array.input`: 被查询的原始字符串
--------------------------------------------------
3.reg.lastIndex
---------------
- 正则对象上的属性
- 字面意思: 匹配字符串的最后一个索引位置
- 实际含义: 下一次查询的起点
--------------------------------------------------
### 示例: code/demo05.html
```html
<!DOCTYPE html>
<html>
<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">
<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 matchArr;
// 最终结果字符串初值
var resultStr = '<pre>';
// 每次查询起始位置
var first = 0;
// 每次查询终止索引
var last = 0;
while ((matchArr = reg.exec(searchStr)) !== null) {
// 设置每次查询的终点到匹配的字符的位置
last = matchArr.index;
// 获取匹配字符前面的内容,并封装到结果字符串
resultStr += searchStr.substring(first, last);
// 使用class样式, 包装与关键字匹配到的字符串
resultStr += '<span style="color:red">' + matchArr[0] + '</span>';
// 正则对象属性lastIndex是下次查询的索引位置,可用来重置查询的起点, 获取匹配关键字后面的内容
first = reg.lastIndex;
}
// 完成结果字符串
resultStr += searchStr.substring(first, searchStr.length);
resultStr += '</pre>';
// 将查询结果插入到页面中
document.getElementById('result').innerHTML = resultStr;
// 注: 实际开发中, 被搜索的内容,应该来自数据库
}
</script>
</body>
</html>
```
