# 正则分析
该章节主要结合具体使用列子，分析中高复杂度的正则表达式
## 提取字符串中用十六进制表示的色值
> 十六进制的色值表示方法有两种，分别是3位数和6位数，并以#开头，如：白色（#fff），黑色（#000000）
```javascript
let regexp = /#([a-f0-9]{3}){1,2}\b/gi;
let str = "color: #3f3; background-color: #AA00ef; and: #abcd";
str.match(regexp); // #3f3 #AA00ef
```
**解析**
* \[a-f0-9]，十六进制由0-9数字和a-f字母组成，其中字母
* \#**，** 十六进制的色值以**#**开头
* (\[a-f0-9]{3}){1,2}，十六进制色值有3位和6位，其中{3}表示中括号中的字符出现3次，{1,2}表示圆弧括号中的3个字符重复1次或2次
* \b，每个色值后跟随空格，标点符号等，进而可以使用\b表示一个单词的结束
* gi，正则标志，全局匹配，不区分大小写
## 提取字符串中正数
> 提取内容包含正浮点数，正整数，排除0，负数
```javascript
let regexp = /[1-9]\d*(\.\d+)?/g;
let str = "1.5 0 -5 12. 1230.4.";
str.match(regexp); // ["1.5", "5", "12", "1230.4"]
```
**解析**
* \[1-9]，表示正数以1-9开头，一位数字
* \d\*，表示0-9数字出现0次或多次
* (\\.\d+)?，表示小数点可有可无
## 提取字符串中数字
> 数字包含负数，正数，整数，浮点数，以及0
```javascript
let regexp = /-?\d+(\.\d+)?/g;
let str = "-1.5 0 2 -123.4.";
str.match(regexp); // ["-1.5", "0", "2", "-123.4"]
```
**解析**
* -?，表示匹配负数与正数
* \d+，表示匹配0-9
* (\\.\d+)?，表示小数点可有可无
## 提取html标签名与class属性值
> html标签结构为\The h1\
，其中h1为标签名，h1-tag为class名称，h1-id为标签id
```javascript
let regexp = /<([a-z\d]+)[^>]*?class="([a-z\d-_]*)"[^>]*>/g;
let str = 'The h1
';
regexp.exec(str);
/**
由于是全局匹配模式，使用exec时，会进行多次匹配，每次匹配的位置使用lastindex标记
第一次匹配数组：[
"",
"h1",
"h1-tag",
index: 0,
input: "The h1
",
groups: undefined
]
第二次匹配数组： [
"",
"h2",
"h2-tag",
index: 61,
input: "The h1
",
groups: undefined
]
**/
```
**解析**
* (\[a-z\d]+)，匹配标签名
* \[^>]\*?，最小匹配非>字符，若没有最小匹配，则该模式也可以匹配class属性与值
* class="(\[a-z\d-\_]\*)"，匹配class属性值，注意该模式无法匹配多个class值的场景
* \[^>]\*，尽可能多的匹配非>字符，以便达到标签结束位置
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://nxtech.gitbook.io/regexp/complex-regexp-analysis.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.