掌握正则表达式与JavaScriptDOM操作打造高效动态网页从基础到实战提升前端开发技能

威震华夏关云长

1. 引言

在现代前端开发中，正则表达式和JavaScript DOM操作是两项核心技能，它们能够帮助开发者创建高效、动态且用户友好的网页。正则表达式提供了强大的文本模式匹配和处理能力，而DOM操作则允许我们动态地修改网页内容和结构。掌握这两项技术并学会将它们结合使用，可以极大地提升前端开发效率和用户体验。

本文将从基础概念开始，逐步深入到实际应用场景，通过详细的代码示例和实战案例，帮助读者全面理解并掌握正则表达式与JavaScript DOM操作的结合使用，从而提升前端开发技能。

2. 正则表达式基础

2.1 什么是正则表达式

正则表达式（Regular Expression，简称regex或regexp）是一种用于描述字符串模式的强大工具。它由一系列特殊字符和普通字符组成，可以用来检查字符串是否符合某种模式、提取符合模式的部分或替换字符串中的特定部分。

2.2 正则表达式的基本语法

在JavaScript中，可以通过两种方式创建正则表达式：

2. // 使用字面量
3. const pattern1 = /pattern/flags;
5. // 使用构造函数
6. const pattern2 = new RegExp('pattern', 'flags');

复制代码

• .：匹配除换行符以外的任何单个字符
• \d：匹配任何数字（等同于[0-9]）
• \D：匹配任何非数字字符（等同于[^0-9]）
• \w：匹配任何字母数字字符（等同于[a-zA-Z0-9_]）
• \W：匹配任何非字母数字字符（等同于[^a-zA-Z0-9_]）
• \s：匹配任何空白字符（包括空格、制表符、换行符等）
• \S：匹配任何非空白字符

• *：匹配前面的元素零次或多次
• +：匹配前面的元素一次或多次
• ?：匹配前面的元素零次或一次
• {n}：匹配前面的元素恰好n次
• {n,}：匹配前面的元素至少n次
• {n,m}：匹配前面的元素至少n次，至多m次

• ^：匹配字符串的开始
• $：匹配字符串的结束
• \b：匹配单词边界
• \B：匹配非单词边界

• [abc]：匹配a、b或c中的任意一个字符
• [^abc]：匹配除a、b、c以外的任何字符
• [a-z]：匹配a到z之间的任何小写字母
• [A-Z]：匹配A到Z之间的任何大写字母
• [0-9]：匹配0到9之间的任何数字

2.3 常用的正则表达式模式

以下是一些常用的正则表达式模式示例：

2. // 邮箱验证
3. const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
5. // 手机号验证（简单版）
6. const phoneRegex = /^1[3-9]\d{9}$/;
8. // URL验证
9. const urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
11. // 身份证号验证（简单版）
12. const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
14. // 密码强度验证（至少包含一个大写字母、一个小写字母、一个数字和一个特殊字符，长度至少8位）
15. const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

复制代码

2.4 JavaScript中的正则表达式方法

JavaScript提供了多种使用正则表达式的方法：

2. // test()：测试字符串是否匹配模式，返回true或false
3. const pattern = /hello/;
4. console.log(pattern.test('hello world')); // true
6. // exec()：在字符串中执行匹配搜索，返回结果数组或null
7. const pattern = /(\d+)\.(\d+)\.(\d+)/;
8. const version = 'Version: 2.5.10';
9. const result = pattern.exec(version);
10. console.log(result);
11. // 输出: ["2.5.10", "2", "5", "10", index: 9, input: "Version: 2.5.10", groups: undefined]

复制代码

2. // match()：在字符串中查找匹配，返回结果数组或null
3. const text = 'The price is $123.45';
4. const result = text.match(/\d+\.\d+/);
5. console.log(result); // ["123.45", index: 12, input: "The price is $123.45", groups: undefined]
7. // search()：在字符串中查找匹配，返回匹配位置的索引，否则返回-1
8. const text = 'Hello world';
9. console.log(text.search(/world/)); // 6
11. // replace()：替换匹配的子串
12. const text = 'Hello world';
13. console.log(text.replace(/world/, 'JavaScript')); // "Hello JavaScript"
15. // split()：使用匹配的子串作为分隔符来分割字符串
16. const text = 'apple,banana,orange';
17. console.log(text.split(/,/)); // ["apple", "banana", "orange"]

复制代码

3. JavaScript DOM操作基础

3.1 DOM的概念和结构

文档对象模型（Document Object Model，简称DOM）是HTML和XML文档的编程接口。它将文档表示为一个节点树，其中每个节点代表文档的一部分（如元素、属性、文本等）。

DOM树的结构如下：

2. document
3. └── html
4.     ├── head
5.     │   ├── title
6.     │   ├── meta
7.     │   └── link
8.     └── body
9.         ├── header
10.         ├── nav
11.         ├── main
12.         │   ├── h1
13.         │   ├── p
14.         │   └── div
15.         └── footer

复制代码

3.2 选择DOM元素的方法

JavaScript提供了多种选择DOM元素的方法：

2. // 通过ID选择元素
3. const elementById = document.getElementById('myId');
5. // 通过类名选择元素（返回HTMLCollection）
6. const elementsByClass = document.getElementsByClassName('myClass');
8. // 通过标签名选择元素（返回HTMLCollection）
9. const elementsByTag = document.getElementsByTagName('div');
11. // 通过CSS选择器选择单个元素
12. const elementByQuery = document.querySelector('#myId .myClass');
14. // 通过CSS选择器选择多个元素（返回NodeList）
15. const elementsByQueryAll = document.querySelectorAll('div.myClass');

复制代码

3.3 修改DOM元素

2. // 获取元素
3. const element = document.getElementById('myElement');
5. // 修改文本内容
6. element.textContent = '新的文本内容';
8. // 修改HTML内容
9. element.innerHTML = '<strong>加粗的文本</strong>';
11. // 修改属性
12. element.setAttribute('class', 'new-class');
13. element.id = 'newId';
15. // 修改样式
16. element.style.color = 'red';
17. element.style.fontSize = '16px';

复制代码

2. const element = document.getElementById('myElement');
4. // 添加类
5. element.classList.add('active');
7. // 移除类
8. element.classList.remove('inactive');
10. // 切换类（如果存在则移除，不存在则添加）
11. element.classList.toggle('highlight');
13. // 检查是否包含某个类
14. if (element.classList.contains('active')) {
15.     console.log('元素具有active类');
16. }

复制代码

3.4 创建和删除DOM元素

2. // 创建新元素
3. const newDiv = document.createElement('div');
4. newDiv.id = 'newDiv';
5. newDiv.className = 'container';
6. newDiv.textContent = '这是一个新创建的div';
8. // 添加到DOM中
9. document.body.appendChild(newDiv);
11. // 创建文本节点
12. const textNode = document.createTextNode('这是一个文本节点');
13. newDiv.appendChild(textNode);
15. // 删除元素
16. const elementToRemove = document.getElementById('elementToRemove');
17. elementToRemove.parentNode.removeChild(elementToRemove);
19. // 替换元素
20. const oldElement = document.getElementById('oldElement');
21. const newElement = document.createElement('div');
22. newElement.textContent = '新元素';
23. oldElement.parentNode.replaceChild(newElement, oldElement);

复制代码

3.5 事件处理

2. // 获取元素
3. const button = document.getElementById('myButton');
5. // 添加事件监听器
6. button.addEventListener('click', function(event) {
7.     console.log('按钮被点击了');
8.     console.log('事件对象:', event);
9. });
11. // 使用箭头函数
12. button.addEventListener('click', (event) => {
13.     console.log('按钮被点击了（箭头函数）');
14. });
16. // 移除事件监听器
17. function handleClick(event) {
18.     console.log('处理点击事件');
19. }
20. button.addEventListener('click', handleClick);
21. // button.removeEventListener('click', handleClick);
23. // 事件委托
24. document.addEventListener('click', function(event) {
25.     if (event.target.matches('.button')) {
26.         console.log('某个按钮被点击了');
27.     }
28. });

复制代码

4. 结合正则表达式和DOM操作

4.1 表单验证

正则表达式和DOM操作结合最常见的应用场景之一是表单验证。以下是一个完整的表单验证示例：

2. <!DOCTYPE html>
3. <html lang="zh-CN">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>表单验证示例</title>
8.     <style>
9.         body {
10.             font-family: Arial, sans-serif;
11.             max-width: 600px;
12.             margin: 0 auto;
13.             padding: 20px;
14.         }
15.         .form-group {
16.             margin-bottom: 15px;
17.         }
18.         label {
19.             display: block;
20.             margin-bottom: 5px;
21.             font-weight: bold;
22.         }
23.         input {
24.             width: 100%;
25.             padding: 8px;
26.             box-sizing: border-box;
27.             border: 1px solid #ddd;
28.             border-radius: 4px;
29.         }
30.         input:focus {
31.             outline: none;
32.             border-color: #4CAF50;
33.         }
34.         .error {
35.             color: red;
36.             font-size: 12px;
37.             margin-top: 5px;
38.             display: none;
39.         }
40.         input.invalid {
41.             border-color: red;
42.         }
43.         button {
44.             background-color: #4CAF50;
45.             color: white;
46.             padding: 10px 15px;
47.             border: none;
48.             border-radius: 4px;
49.             cursor: pointer;
50.         }
51.         button:hover {
52.             background-color: #45a049;
53.         }
54.         .success-message {
55.             display: none;
56.             background-color: #dff0d8;
57.             color: #3c763d;
58.             padding: 10px;
59.             margin-top: 20px;
60.             border-radius: 4px;
61.         }
62.     </style>
63. </head>
64. <body>
65.     <h1>注册表单</h1>
66.     <form id="registrationForm">
67.         <div class="form-group">
68.             <label for="username">用户名:</label>
69.             <input type="text" id="username" name="username">
70.             <div id="usernameError" class="error">用户名必须是4-16个字母、数字或下划线</div>
71.         </div>
72.         
73.         <div class="form-group">
74.             <label for="email">邮箱:</label>
75.             <input type="email" id="email" name="email">
76.             <div id="emailError" class="error">请输入有效的邮箱地址</div>
77.         </div>
78.         
79.         <div class="form-group">
80.             <label for="phone">手机号:</label>
81.             <input type="tel" id="phone" name="phone">
82.             <div id="phoneError" class="error">请输入有效的11位手机号</div>
83.         </div>
84.         
85.         <div class="form-group">
86.             <label for="password">密码:</label>
87.             <input type="password" id="password" name="password">
88.             <div id="passwordError" class="error">密码必须至少8位，包含大小写字母、数字和特殊字符</div>
89.         </div>
90.         
91.         <div class="form-group">
92.             <label for="confirmPassword">确认密码:</label>
93.             <input type="password" id="confirmPassword" name="confirmPassword">
94.             <div id="confirmPasswordError" class="error">两次输入的密码不一致</div>
95.         </div>
96.         
97.         <button type="submit">注册</button>
98.     </form>
99.    
100.     <div id="successMessage" class="success-message">
101.         注册成功！
102.     </div>
104.     <script>
105.         // 获取表单和输入元素
106.         const form = document.getElementById('registrationForm');
107.         const usernameInput = document.getElementById('username');
108.         const emailInput = document.getElementById('email');
109.         const phoneInput = document.getElementById('phone');
110.         const passwordInput = document.getElementById('password');
111.         const confirmPasswordInput = document.getElementById('confirmPassword');
112.         
113.         // 获取错误消息元素
114.         const usernameError = document.getElementById('usernameError');
115.         const emailError = document.getElementById('emailError');
116.         const phoneError = document.getElementById('phoneError');
117.         const passwordError = document.getElementById('passwordError');
118.         const confirmPasswordError = document.getElementById('confirmPasswordError');
119.         
120.         // 获取成功消息元素
121.         const successMessage = document.getElementById('successMessage');
122.         
123.         // 定义正则表达式
124.         const usernameRegex = /^[a-zA-Z0-9_]{4,16}$/;
125.         const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
126.         const phoneRegex = /^1[3-9]\d{9}$/;
127.         const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
128.         
129.         // 验证函数
130.         function validateUsername() {
131.             const isValid = usernameRegex.test(usernameInput.value);
132.             if (!isValid) {
133.                 usernameInput.classList.add('invalid');
134.                 usernameError.style.display = 'block';
135.             } else {
136.                 usernameInput.classList.remove('invalid');
137.                 usernameError.style.display = 'none';
138.             }
139.             return isValid;
140.         }
141.         
142.         function validateEmail() {
143.             const isValid = emailRegex.test(emailInput.value);
144.             if (!isValid) {
145.                 emailInput.classList.add('invalid');
146.                 emailError.style.display = 'block';
147.             } else {
148.                 emailInput.classList.remove('invalid');
149.                 emailError.style.display = 'none';
150.             }
151.             return isValid;
152.         }
153.         
154.         function validatePhone() {
155.             const isValid = phoneRegex.test(phoneInput.value);
156.             if (!isValid) {
157.                 phoneInput.classList.add('invalid');
158.                 phoneError.style.display = 'block';
159.             } else {
160.                 phoneInput.classList.remove('invalid');
161.                 phoneError.style.display = 'none';
162.             }
163.             return isValid;
164.         }
165.         
166.         function validatePassword() {
167.             const isValid = passwordRegex.test(passwordInput.value);
168.             if (!isValid) {
169.                 passwordInput.classList.add('invalid');
170.                 passwordError.style.display = 'block';
171.             } else {
172.                 passwordInput.classList.remove('invalid');
173.                 passwordError.style.display = 'none';
174.             }
175.             return isValid;
176.         }
177.         
178.         function validateConfirmPassword() {
179.             const isValid = passwordInput.value === confirmPasswordInput.value;
180.             if (!isValid) {
181.                 confirmPasswordInput.classList.add('invalid');
182.                 confirmPasswordError.style.display = 'block';
183.             } else {
184.                 confirmPasswordInput.classList.remove('invalid');
185.                 confirmPasswordError.style.display = 'none';
186.             }
187.             return isValid;
188.         }
189.         
190.         // 添加输入事件监听器
191.         usernameInput.addEventListener('input', validateUsername);
192.         emailInput.addEventListener('input', validateEmail);
193.         phoneInput.addEventListener('input', validatePhone);
194.         passwordInput.addEventListener('input', validatePassword);
195.         confirmPasswordInput.addEventListener('input', validateConfirmPassword);
196.         
197.         // 添加表单提交事件监听器
198.         form.addEventListener('submit', function(event) {
199.             event.preventDefault();
200.             
201.             // 验证所有字段
202.             const isUsernameValid = validateUsername();
203.             const isEmailValid = validateEmail();
204.             const isPhoneValid = validatePhone();
205.             const isPasswordValid = validatePassword();
206.             const isConfirmPasswordValid = validateConfirmPassword();
207.             
208.             // 如果所有字段都有效，显示成功消息
209.             if (isUsernameValid && isEmailValid && isPhoneValid && isPasswordValid && isConfirmPasswordValid) {
210.                 form.style.display = 'none';
211.                 successMessage.style.display = 'block';
212.             }
213.         });
214.     </script>
215. </body>
216. </html>

复制代码

4.2 动态内容搜索和过滤

正则表达式和DOM操作结合的另一个常见应用是动态内容搜索和过滤。以下是一个实时搜索和过滤列表项的示例：

2. <!DOCTYPE html>
3. <html lang="zh-CN">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>动态搜索和过滤</title>
8.     <style>
9.         body {
10.             font-family: Arial, sans-serif;
11.             max-width: 800px;
12.             margin: 0 auto;
13.             padding: 20px;
14.         }
15.         .search-container {
16.             margin-bottom: 20px;
17.         }
18.         .search-box {
19.             width: 100%;
20.             padding: 10px;
21.             font-size: 16px;
22.             border: 1px solid #ddd;
23.             border-radius: 4px;
24.             box-sizing: border-box;
25.         }
26.         .search-options {
27.             margin-top: 10px;
28.             display: flex;
29.             gap: 15px;
30.         }
31.         .search-option {
32.             display: flex;
33.             align-items: center;
34.         }
35.         .search-option input {
36.             margin-right: 5px;
37.         }
38.         .item-list {
39.             list-style-type: none;
40.             padding: 0;
41.         }
42.         .item {
43.             padding: 15px;
44.             border-bottom: 1px solid #eee;
45.             display: flex;
46.             align-items: center;
47.         }
48.         .item:last-child {
49.             border-bottom: none;
50.         }
51.         .item-icon {
52.             width: 50px;
53.             height: 50px;
54.             background-color: #4CAF50;
55.             border-radius: 50%;
56.             display: flex;
57.             align-items: center;
58.             justify-content: center;
59.             color: white;
60.             font-weight: bold;
61.             margin-right: 15px;
62.         }
63.         .item-content {
64.             flex: 1;
65.         }
66.         .item-title {
67.             font-weight: bold;
68.             margin-bottom: 5px;
69.         }
70.         .item-description {
71.             color: #666;
72.             font-size: 14px;
73.         }
74.         .highlight {
75.             background-color: yellow;
76.             font-weight: bold;
77.         }
78.         .no-results {
79.             text-align: center;
80.             padding: 20px;
81.             color: #666;
82.             display: none;
83.         }
84.     </style>
85. </head>
86. <body>
87.     <h1>联系人列表</h1>
88.    
89.     <div class="search-container">
90.         <input type="text" id="searchInput" class="search-box" placeholder="搜索联系人...">
91.         <div class="search-options">
92.             <div class="search-option">
93.                 <input type="checkbox" id="caseSensitive" name="caseSensitive">
94.                 <label for="caseSensitive">区分大小写</label>
95.             </div>
96.             <div class="search-option">
97.                 <input type="checkbox" id="wholeWord" name="wholeWord">
98.                 <label for="wholeWord">全词匹配</label>
99.             </div>
100.             <div class="search-option">
101.                 <input type="checkbox" id="useRegex" name="useRegex">
102.                 <label for="useRegex">使用正则表达式</label>
103.             </div>
104.         </div>
105.     </div>
106.    
107.     <ul id="itemList" class="item-list">
108.         <li class="item" data-name="张三" data-phone="13800138000" data-email="zhangsan@example.com">
109.             <div class="item-icon">张</div>
110.             <div class="item-content">
111.                 <div class="item-title">张三</div>
112.                 <div class="item-description">电话: 13800138000 | 邮箱: zhangsan@example.com</div>
113.             </div>
114.         </li>
115.         <li class="item" data-name="李四" data-phone="13900139000" data-email="lisi@example.com">
116.             <div class="item-icon">李</div>
117.             <div class="item-content">
118.                 <div class="item-title">李四</div>
119.                 <div class="item-description">电话: 13900139000 | 邮箱: lisi@example.com</div>
120.             </div>
121.         </li>
122.         <li class="item" data-name="王五" data-phone="13700137000" data-email="wangwu@example.com">
123.             <div class="item-icon">王</div>
124.             <div class="item-content">
125.                 <div class="item-title">王五</div>
126.                 <div class="item-description">电话: 13700137000 | 邮箱: wangwu@example.com</div>
127.             </div>
128.         </li>
129.         <li class="item" data-name="赵六" data-phone="13600136000" data-email="zhaoliu@example.com">
130.             <div class="item-icon">赵</div>
131.             <div class="item-content">
132.                 <div class="item-title">赵六</div>
133.                 <div class="item-description">电话: 13600136000 | 邮箱: zhaoliu@example.com</div>
134.             </div>
135.         </li>
136.         <li class="item" data-name="钱七" data-phone="13500135000" data-email="qianqi@example.com">
137.             <div class="item-icon">钱</div>
138.             <div class="item-content">
139.                 <div class="item-title">钱七</div>
140.                 <div class="item-description">电话: 13500135000 | 邮箱: qianqi@example.com</div>
141.             </div>
142.         </li>
143.     </ul>
144.    
145.     <div id="noResults" class="no-results">
146.         没有找到匹配的联系人
147.     </div>
149.     <script>
150.         // 获取DOM元素
151.         const searchInput = document.getElementById('searchInput');
152.         const caseSensitiveCheckbox = document.getElementById('caseSensitive');
153.         const wholeWordCheckbox = document.getElementById('wholeWord');
154.         const useRegexCheckbox = document.getElementById('useRegex');
155.         const itemList = document.getElementById('itemList');
156.         const items = itemList.querySelectorAll('.item');
157.         const noResults = document.getElementById('noResults');
158.         
159.         // 搜索函数
160.         function performSearch() {
161.             const searchTerm = searchInput.value.trim();
162.             const caseSensitive = caseSensitiveCheckbox.checked;
163.             const wholeWord = wholeWordCheckbox.checked;
164.             const useRegex = useRegexCheckbox.checked;
165.             
166.             let hasResults = false;
167.             
168.             // 如果搜索词为空，显示所有项目
169.             if (searchTerm === '') {
170.                 items.forEach(item => {
171.                     item.style.display = 'flex';
172.                     // 移除所有高亮
173.                     removeHighlights(item);
174.                 });
175.                 noResults.style.display = 'none';
176.                 return;
177.             }
178.             
179.             // 构建正则表达式
180.             let pattern;
181.             try {
182.                 if (useRegex) {
183.                     // 使用用户提供的正则表达式
184.                     pattern = new RegExp(searchTerm, caseSensitive ? 'g' : 'gi');
185.                 } else {
186.                     // 构建基于搜索词的正则表达式
187.                     let escapedTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
188.                     if (wholeWord) {
189.                         pattern = new RegExp(`\\b${escapedTerm}\\b`, caseSensitive ? 'g' : 'gi');
190.                     } else {
191.                         pattern = new RegExp(escapedTerm, caseSensitive ? 'g' : 'gi');
192.                     }
193.                 }
194.                
195.                 // 遍历所有项目
196.                 items.forEach(item => {
197.                     const name = item.getAttribute('data-name');
198.                     const phone = item.getAttribute('data-phone');
199.                     const email = item.getAttribute('data-email');
200.                     const titleElement = item.querySelector('.item-title');
201.                     const descriptionElement = item.querySelector('.item-description');
202.                     
203.                     // 检查是否匹配
204.                     const nameMatch = pattern.test(name);
205.                     pattern.lastIndex = 0; // 重置正则表达式的lastIndex
206.                     const phoneMatch = pattern.test(phone);
207.                     pattern.lastIndex = 0;
208.                     const emailMatch = pattern.test(email);
209.                     pattern.lastIndex = 0;
210.                     
211.                     if (nameMatch || phoneMatch || emailMatch) {
212.                         // 显示匹配的项目
213.                         item.style.display = 'flex';
214.                         hasResults = true;
215.                         
216.                         // 移除之前的高亮
217.                         removeHighlights(item);
218.                         
219.                         // 添加新的高亮
220.                         if (nameMatch) {
221.                             highlightText(titleElement, pattern);
222.                         }
223.                         if (phoneMatch || emailMatch) {
224.                             highlightText(descriptionElement, pattern);
225.                         }
226.                     } else {
227.                         // 隐藏不匹配的项目
228.                         item.style.display = 'none';
229.                     }
230.                 });
231.                
232.                 // 显示或隐藏"无结果"消息
233.                 noResults.style.display = hasResults ? 'none' : 'block';
234.                
235.             } catch (error) {
236.                 // 处理正则表达式错误
237.                 console.error('正则表达式错误:', error);
238.                 items.forEach(item => {
239.                     item.style.display = 'flex';
240.                     removeHighlights(item);
241.                 });
242.                 noResults.style.display = 'none';
243.             }
244.         }
245.         
246.         // 高亮文本函数
247.         function highlightText(element, regex) {
248.             const text = element.textContent;
249.             const matches = text.match(regex);
250.             
251.             if (matches) {
252.                 let highlightedText = text;
253.                 matches.forEach(match => {
254.                     // 使用正则表达式全局替换匹配的文本
255.                     highlightedText = highlightedText.replace(regex, '<span class="highlight">$&</span>');
256.                 });
257.                 element.innerHTML = highlightedText;
258.             }
259.         }
260.         
261.         // 移除高亮函数
262.         function removeHighlights(item) {
263.             const highlights = item.querySelectorAll('.highlight');
264.             highlights.forEach(highlight => {
265.                 const parent = highlight.parentNode;
266.                 parent.replaceChild(document.createTextNode(highlight.textContent), highlight);
267.                 parent.normalize();
268.             });
269.         }
270.         
271.         // 添加事件监听器
272.         searchInput.addEventListener('input', performSearch);
273.         caseSensitiveCheckbox.addEventListener('change', performSearch);
274.         wholeWordCheckbox.addEventListener('change', performSearch);
275.         useRegexCheckbox.addEventListener('change', performSearch);
276.     </script>
277. </body>
278. </html>

复制代码

4.3 文本处理和格式化

正则表达式和DOM操作结合还可以用于文本处理和格式化。以下是一个文本格式化工具的示例：

2. <!DOCTYPE html>
3. <html lang="zh-CN">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>文本格式化工具</title>
8.     <style>
9.         body {
10.             font-family: Arial, sans-serif;
11.             max-width: 800px;
12.             margin: 0 auto;
13.             padding: 20px;
14.         }
15.         h1 {
16.             text-align: center;
17.         }
18.         .container {
19.             display: flex;
20.             flex-direction: column;
21.             gap: 20px;
22.         }
23.         .section {
24.             border: 1px solid #ddd;
25.             border-radius: 5px;
26.             padding: 15px;
27.         }
28.         .section-title {
29.             font-weight: bold;
30.             margin-bottom: 10px;
31.             color: #333;
32.         }
33.         textarea {
34.             width: 100%;
35.             height: 150px;
36.             padding: 10px;
37.             border: 1px solid #ddd;
38.             border-radius: 4px;
39.             resize: vertical;
40.             font-family: inherit;
41.         }
42.         .buttons {
43.             display: flex;
44.             flex-wrap: wrap;
45.             gap: 10px;
46.             margin-top: 10px;
47.         }
48.         button {
49.             padding: 8px 12px;
50.             background-color: #4CAF50;
51.             color: white;
52.             border: none;
53.             border-radius: 4px;
54.             cursor: pointer;
55.             font-size: 14px;
56.         }
57.         button:hover {
58.             background-color: #45a049;
59.         }
60.         .options {
61.             display: flex;
62.             flex-wrap: wrap;
63.             gap: 15px;
64.             margin-top: 10px;
65.         }
66.         .option {
67.             display: flex;
68.             align-items: center;
69.         }
70.         .option input {
71.             margin-right: 5px;
72.         }
73.         .custom-regex {
74.             margin-top: 10px;
75.         }
76.         .custom-regex input {
77.             width: 100%;
78.             padding: 8px;
79.             border: 1px solid #ddd;
80.             border-radius: 4px;
81.         }
82.     </style>
83. </head>
84. <body>
85.     <h1>文本格式化工具</h1>
86.    
87.     <div class="container">
88.         <div class="section">
89.             <div class="section-title">输入文本</div>
90.             <textarea id="inputText" placeholder="在此输入要格式化的文本..."></textarea>
91.         </div>
92.         
93.         <div class="section">
94.             <div class="section-title">格式化选项</div>
95.             <div class="buttons">
96.                 <button id="removeExtraSpaces">移除多余空格</button>
97.                 <button id="fixLineBreaks">修正换行</button>
98.                 <button id="capitalizeSentences">句子首字母大写</button>
99.                 <button id="removeSpecialChars">移除特殊字符</button>
100.                 <button id="formatPhoneNumbers">格式化电话号码</button>
101.                 <button id="formatEmails">格式化邮箱地址</button>
102.                 <button id="extractUrls">提取URL</button>
103.                 <button id="extractNumbers">提取数字</button>
104.             </div>
105.             
106.             <div class="options">
107.                 <div class="option">
108.                     <input type="checkbox" id="globalReplace">
109.                     <label for="globalReplace">全局替换</label>
110.                 </div>
111.                 <div class="option">
112.                     <input type="checkbox" id="caseSensitive">
113.                     <label for="caseSensitive">区分大小写</label>
114.                 </div>
115.             </div>
116.             
117.             <div class="custom-regex">
118.                 <label for="customRegex">自定义正则表达式:</label>
119.                 <input type="text" id="customRegex" placeholder="输入正则表达式">
120.                 <button id="applyCustomRegex">应用</button>
121.             </div>
122.         </div>
123.         
124.         <div class="section">
125.             <div class="section-title">格式化结果</div>
126.             <textarea id="outputText" readonly placeholder="格式化结果将显示在这里..."></textarea>
127.             <div class="buttons">
128.                 <button id="copyResult">复制结果</button>
129.                 <button id="clearAll">清除全部</button>
130.             </div>
131.         </div>
132.     </div>
134.     <script>
135.         // 获取DOM元素
136.         const inputText = document.getElementById('inputText');
137.         const outputText = document.getElementById('outputText');
138.         const globalReplaceCheckbox = document.getElementById('globalReplace');
139.         const caseSensitiveCheckbox = document.getElementById('caseSensitive');
140.         const customRegexInput = document.getElementById('customRegex');
141.         
142.         // 获取按钮
143.         const removeExtraSpacesBtn = document.getElementById('removeExtraSpaces');
144.         const fixLineBreaksBtn = document.getElementById('fixLineBreaks');
145.         const capitalizeSentencesBtn = document.getElementById('capitalizeSentences');
146.         const removeSpecialCharsBtn = document.getElementById('removeSpecialChars');
147.         const formatPhoneNumbersBtn = document.getElementById('formatPhoneNumbers');
148.         const formatEmailsBtn = document.getElementById('formatEmails');
149.         const extractUrlsBtn = document.getElementById('extractUrls');
150.         const extractNumbersBtn = document.getElementById('extractNumbers');
151.         const applyCustomRegexBtn = document.getElementById('applyCustomRegex');
152.         const copyResultBtn = document.getElementById('copyResult');
153.         const clearAllBtn = document.getElementById('clearAll');
154.         
155.         // 获取标志
156.         function getFlags() {
157.             let flags = '';
158.             if (globalReplaceCheckbox.checked) flags += 'g';
159.             if (!caseSensitiveCheckbox.checked) flags += 'i';
160.             return flags;
161.         }
162.         
163.         // 应用正则表达式
164.         function applyRegex(pattern, replacement, input = inputText.value) {
165.             try {
166.                 const regex = new RegExp(pattern, getFlags());
167.                 return input.replace(regex, replacement);
168.             } catch (error) {
169.                 console.error('正则表达式错误:', error);
170.                 return '正则表达式错误: ' + error.message;
171.             }
172.         }
173.         
174.         // 移除多余空格
175.         removeExtraSpacesBtn.addEventListener('click', function() {
176.             // 移除开头和结尾的空格
177.             let result = inputText.value.trim();
178.             // 将多个连续空格替换为单个空格
179.             result = result.replace(/ +/g, ' ');
180.             // 将多个连续换行符替换为单个换行符
181.             result = result.replace(/\n+/g, '\n');
182.             outputText.value = result;
183.         });
184.         
185.         // 修正换行
186.         fixLineBreaksBtn.addEventListener('click', function() {
187.             // 将各种换行符统一为\n
188.             let result = inputText.value.replace(/\r\n|\r/g, '\n');
189.             // 确保段落之间只有一个空行
190.             result = result.replace(/\n{3,}/g, '\n\n');
191.             outputText.value = result;
192.         });
193.         
194.         // 句子首字母大写
195.         capitalizeSentencesBtn.addEventListener('click', function() {
196.             let result = inputText.value.toLowerCase();
197.             // 句子首字母大写
198.             result = result.replace(/(^\w|\.\s*\w)/g, function(match) {
199.                 return match.toUpperCase();
200.             });
201.             outputText.value = result;
202.         });
203.         
204.         // 移除特殊字符
205.         removeSpecialCharsBtn.addEventListener('click', function() {
206.             // 保留字母、数字、中文、基本标点和空格
207.             const result = applyRegex(/[^\w\s\u4e00-\u9fa5.,!?;:()\[\]{}'"\/\-]/g, '');
208.             outputText.value = result;
209.         });
210.         
211.         // 格式化电话号码
212.         formatPhoneNumbersBtn.addEventListener('click', function() {
213.             // 将连续的11位数字格式化为手机号格式
214.             let result = applyRegex(/(\d{3})(\d{4})(\d{4})/g, '$1-$2-$3');
215.             // 将连续的3-4位数字后跟7-8位数字格式化为座机格式
216.             result = applyRegex(/(\d{3,4})(\d{7,8})/g, '$1-$2', result);
217.             outputText.value = result;
218.         });
219.         
220.         // 格式化邮箱地址
221.         formatEmailsBtn.addEventListener('click', function() {
222.             // 将邮箱地址转换为小写
223.             const result = applyRegex(/([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/g, function(match) {
224.                 return match.toLowerCase();
225.             });
226.             outputText.value = result;
227.         });
228.         
229.         // 提取URL
230.         extractUrlsBtn.addEventListener('click', function() {
231.             // 提取URL
232.             const urls = inputText.value.match(/https?:\/\/[^\s]+/g);
233.             outputText.value = urls ? urls.join('\n') : '未找到URL';
234.         });
235.         
236.         // 提取数字
237.         extractNumbersBtn.addEventListener('click', function() {
238.             // 提取所有数字
239.             const numbers = inputText.value.match(/\d+\.?\d*/g);
240.             outputText.value = numbers ? numbers.join('\n') : '未找到数字';
241.         });
242.         
243.         // 应用自定义正则表达式
244.         applyCustomRegexBtn.addEventListener('click', function() {
245.             const pattern = customRegexInput.value.trim();
246.             if (!pattern) {
247.                 outputText.value = '请输入正则表达式';
248.                 return;
249.             }
250.             
251.             // 简单替换模式
252.             const result = applyRegex(pattern, '');
253.             outputText.value = result;
254.         });
255.         
256.         // 复制结果
257.         copyResultBtn.addEventListener('click', function() {
258.             outputText.select();
259.             document.execCommand('copy');
260.             
261.             // 临时更改按钮文本
262.             const originalText = copyResultBtn.textContent;
263.             copyResultBtn.textContent = '已复制!';
264.             setTimeout(() => {
265.                 copyResultBtn.textContent = originalText;
266.             }, 2000);
267.         });
268.         
269.         // 清除全部
270.         clearAllBtn.addEventListener('click', function() {
271.             inputText.value = '';
272.             outputText.value = '';
273.             customRegexInput.value = '';
274.         });
275.     </script>
276. </body>
277. </html>

复制代码

4.4 动态样式应用

正则表达式和DOM操作结合还可以用于动态样式应用。以下是一个根据内容模式动态应用样式的示例：

2. <!DOCTYPE html>
3. <html lang="zh-CN">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>动态样式应用</title>
8.     <style>
9.         body {
10.             font-family: Arial, sans-serif;
11.             max-width: 800px;
12.             margin: 0 auto;
13.             padding: 20px;
14.         }
15.         h1 {
16.             text-align: center;
17.         }
18.         .controls {
19.             background-color: #f5f5f5;
20.             padding: 15px;
21.             border-radius: 5px;
22.             margin-bottom: 20px;
23.         }
24.         .control-group {
25.             margin-bottom: 15px;
26.         }
27.         .control-group label {
28.             display: block;
29.             margin-bottom: 5px;
30.             font-weight: bold;
31.         }
32.         .control-group input, .control-group select {
33.             width: 100%;
34.             padding: 8px;
35.             border: 1px solid #ddd;
36.             border-radius: 4px;
37.             box-sizing: border-box;
38.         }
39.         .button-group {
40.             display: flex;
41.             gap: 10px;
42.             margin-top: 10px;
43.         }
44.         button {
45.             padding: 8px 12px;
46.             background-color: #4CAF50;
47.             color: white;
48.             border: none;
49.             border-radius: 4px;
50.             cursor: pointer;
51.         }
52.         button:hover {
53.             background-color: #45a049;
54.         }
55.         .content-area {
56.             border: 1px solid #ddd;
57.             border-radius: 5px;
58.             padding: 15px;
59.             min-height: 200px;
60.         }
61.         .highlight {
62.             background-color: yellow;
63.             font-weight: bold;
64.         }
65.         .highlight-red {
66.             background-color: #ffcccc;
67.             color: #990000;
68.         }
69.         .highlight-green {
70.             background-color: #ccffcc;
71.             color: #006600;
72.         }
73.         .highlight-blue {
74.             background-color: #ccccff;
75.             color: #000099;
76.         }
77.         .underline {
78.             text-decoration: underline;
79.         }
80.         .italic {
81.             font-style: italic;
82.         }
83.         .bold {
84.             font-weight: bold;
85.         }
86.         .uppercase {
87.             text-transform: uppercase;
88.         }
89.         .lowercase {
90.             text-transform: lowercase;
91.         }
92.         .message {
93.             margin-top: 10px;
94.             padding: 10px;
95.             border-radius: 4px;
96.             display: none;
97.         }
98.         .success {
99.             background-color: #dff0d8;
100.             color: #3c763d;
101.         }
102.         .error {
103.             background-color: #f2dede;
104.             color: #a94442;
105.         }
106.     </style>
107. </head>
108. <body>
109.     <h1>动态样式应用工具</h1>
110.    
111.     <div class="controls">
112.         <div class="control-group">
113.             <label for="patternInput">模式 (正则表达式):</label>
114.             <input type="text" id="patternInput" placeholder="输入正则表达式，例如: \d+">
115.         </div>
116.         
117.         <div class="control-group">
118.             <label for="styleSelect">应用样式:</label>
119.             <select id="styleSelect">
120.                 <option value="highlight">高亮 (黄色)</option>
121.                 <option value="highlight-red">高亮 (红色)</option>
122.                 <option value="highlight-green">高亮 (绿色)</option>
123.                 <option value="highlight-blue">高亮 (蓝色)</option>
124.                 <option value="underline">下划线</option>
125.                 <option value="italic">斜体</option>
126.                 <option value="bold">粗体</option>
127.                 <option value="uppercase">大写</option>
128.                 <option value="lowercase">小写</option>
129.             </select>
130.         </div>
131.         
132.         <div class="control-group">
133.             <label>
134.                 <input type="checkbox" id="caseSensitive"> 区分大小写
135.             </label>
136.         </div>
137.         
138.         <div class="button-group">
139.             <button id="applyStyle">应用样式</button>
140.             <button id="clearStyles">清除所有样式</button>
141.             <button id="presetExample">使用示例</button>
142.         </div>
143.         
144.         <div id="message" class="message"></div>
145.     </div>
146.    
147.     <div class="content-area" id="contentArea">
148.         <h2>示例文本</h2>
149.         <p>这是一段示例文本，用于演示动态样式应用功能。您可以输入正则表达式来匹配文本中的特定模式，然后选择要应用的样式。</p>
150.         <p>例如，您可以输入 <code>\d+</code> 来匹配所有的数字，然后选择"高亮 (黄色)"样式来高亮显示这些数字。</p>
151.         <p>联系电话: 138-1234-5678 或 010-12345678</p>
152.         <p>电子邮箱: example@example.com</p>
153.         <p>网址: https://www.example.com</p>
154.         <p>日期: 2023-05-15</p>
155.         <p>价格: $19.99 或 ¥99.00</p>
156.     </div>
158.     <script>
159.         // 获取DOM元素
160.         const patternInput = document.getElementById('patternInput');
161.         const styleSelect = document.getElementById('styleSelect');
162.         const caseSensitiveCheckbox = document.getElementById('caseSensitive');
163.         const contentArea = document.getElementById('contentArea');
164.         const messageDiv = document.getElementById('message');
165.         
166.         // 获取按钮
167.         const applyStyleBtn = document.getElementById('applyStyle');
168.         const clearStylesBtn = document.getElementById('clearStyles');
169.         const presetExampleBtn = document.getElementById('presetExample');
170.         
171.         // 显示消息
172.         function showMessage(text, type) {
173.             messageDiv.textContent = text;
174.             messageDiv.className = 'message ' + type;
175.             messageDiv.style.display = 'block';
176.             
177.             // 3秒后隐藏消息
178.             setTimeout(() => {
179.                 messageDiv.style.display = 'none';
180.             }, 3000);
181.         }
182.         
183.         // 应用样式
184.         function applyStyle() {
185.             const pattern = patternInput.value.trim();
186.             if (!pattern) {
187.                 showMessage('请输入正则表达式模式', 'error');
188.                 return;
189.             }
190.             
191.             const style = styleSelect.value;
192.             const caseSensitive = caseSensitiveCheckbox.checked;
193.             
194.             try {
195.                 // 创建正则表达式
196.                 const flags = caseSensitive ? 'g' : 'gi';
197.                 const regex = new RegExp(pattern, flags);
198.                
199.                 // 获取内容区域的所有文本节点
200.                 const walker = document.createTreeWalker(
201.                     contentArea,
202.                     NodeFilter.SHOW_TEXT,
203.                     null,
204.                     false
205.                 );
206.                
207.                 let node;
208.                 const nodesToProcess = [];
209.                
210.                 // 收集所有文本节点
211.                 while (node = walker.nextNode()) {
212.                     // 跳过脚本和样式元素内的文本
213.                     if (node.parentNode.tagName !== 'SCRIPT' && node.parentNode.tagName !== 'STYLE') {
214.                         nodesToProcess.push(node);
215.                     }
216.                 }
217.                
218.                 // 处理每个文本节点
219.                 nodesToProcess.forEach(textNode => {
220.                     const text = textNode.textContent;
221.                     let match;
222.                     let lastIndex = 0;
223.                     const fragment = document.createDocumentFragment();
224.                     
225.                     // 重置正则表达式的lastIndex
226.                     regex.lastIndex = 0;
227.                     
228.                     while ((match = regex.exec(text)) !== null) {
229.                         // 添加匹配前的文本
230.                         if (match.index > lastIndex) {
231.                             fragment.appendChild(document.createTextNode(text.substring(lastIndex, match.index)));
232.                         }
233.                         
234.                         // 创建匹配文本的span并应用样式
235.                         const span = document.createElement('span');
236.                         span.className = style;
237.                         span.textContent = match[0];
238.                         fragment.appendChild(span);
239.                         
240.                         lastIndex = regex.lastIndex;
241.                     }
242.                     
243.                     // 添加剩余的文本
244.                     if (lastIndex < text.length) {
245.                         fragment.appendChild(document.createTextNode(text.substring(lastIndex)));
246.                     }
247.                     
248.                     // 替换原始文本节点
249.                     if (fragment.childNodes.length > 1 || (fragment.childNodes.length === 1 && fragment.firstChild.nodeType !== Node.TEXT_NODE)) {
250.                         textNode.parentNode.replaceChild(fragment, textNode);
251.                     }
252.                 });
253.                
254.                 showMessage('样式应用成功', 'success');
255.             } catch (error) {
256.                 showMessage('正则表达式错误: ' + error.message, 'error');
257.                 console.error('正则表达式错误:', error);
258.             }
259.         }
260.         
261.         // 清除所有样式
262.         function clearStyles() {
263.             // 获取所有带有样式的span元素
264.             const styledSpans = contentArea.querySelectorAll('span[class*="highlight"], span.underline, span.italic, span.bold, span.uppercase, span.lowercase');
265.             
266.             styledSpans.forEach(span => {
267.                 const parent = span.parentNode;
268.                
269.                 // 用文本节点替换span元素
270.                 parent.replaceChild(document.createTextNode(span.textContent), span);
271.                
272.                 // 合并相邻的文本节点
273.                 parent.normalize();
274.             });
275.             
276.             showMessage('已清除所有样式', 'success');
277.         }
278.         
279.         // 使用示例
280.         function usePresetExample() {
281.             patternInput.value = '\\d+';  // 匹配数字
282.             styleSelect.value = 'highlight-blue';  // 蓝色高亮
283.             caseSensitiveCheckbox.checked = false;
284.             
285.             // 应用样式
286.             applyStyle();
287.         }
288.         
289.         // 添加事件监听器
290.         applyStyleBtn.addEventListener('click', applyStyle);
291.         clearStylesBtn.addEventListener('click', clearStyles);
292.         presetExampleBtn.addEventListener('click', usePresetExample);
293.         
294.         // 添加回车键支持
295.         patternInput.addEventListener('keypress', function(event) {
296.             if (event.key === 'Enter') {
297.                 applyStyle();
298.             }
299.         });
300.     </script>
301. </body>
302. </html>

复制代码

5. 实战案例

5.1 实时表单验证

我们已经在前面的章节中展示了一个完整的表单验证示例。这个示例结合了正则表达式用于验证各种输入格式，以及DOM操作用于实时显示验证结果和错误消息。

5.2 动态搜索和过滤功能

同样，我们在前面也展示了一个实时搜索和过滤联系人列表的示例。这个示例使用了正则表达式来匹配搜索词，并通过DOM操作来动态显示或隐藏列表项，以及高亮显示匹配的文本。

5.3 内容高亮显示

让我们再看一个更复杂的内容高亮显示示例，它可以同时高亮多种不同类型的模式：

2. <!DOCTYPE html>
3. <html lang="zh-CN">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>多模式内容高亮</title>
8.     <style>
9.         body {
10.             font-family: Arial, sans-serif;
11.             max-width: 900px;
12.             margin: 0 auto;
13.             padding: 20px;
14.         }
15.         h1 {
16.             text-align: center;
17.         }
18.         .container {
19.             display: flex;
20.             flex-direction: column;
21.             gap: 20px;
22.         }
23.         .panel {
24.             border: 1px solid #ddd;
25.             border-radius: 5px;
26.             padding: 15px;
27.         }
28.         .panel-title {
29.             font-weight: bold;
30.             margin-bottom: 10px;
31.             font-size: 18px;
32.         }
33.         .highlight-controls {
34.             display: grid;
35.             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
36.             gap: 15px;
37.         }
38.         .highlight-control {
39.             display: flex;
40.             flex-direction: column;
41.             gap: 5px;
42.         }
43.         .highlight-control label {
44.             display: flex;
45.             align-items: center;
46.             gap: 5px;
47.             font-weight: normal;
48.         }
49.         .highlight-control input[type="text"] {
50.             padding: 5px;
51.             border: 1px solid #ddd;
52.             border-radius: 3px;
53.         }
54.         .highlight-control select {
55.             padding: 5px;
56.             border: 1px solid #ddd;
57.             border-radius: 3px;
58.         }
59.         .color-picker {
60.             display: flex;
61.             gap: 5px;
62.             align-items: center;
63.         }
64.         .color-picker input[type="color"] {
65.             width: 30px;
66.             height: 30px;
67.             border: none;
68.             border-radius: 3px;
69.             cursor: pointer;
70.         }
71.         .content-area {
72.             min-height: 300px;
73.             padding: 15px;
74.             border: 1px solid #ddd;
75.             border-radius: 5px;
76.             line-height: 1.6;
77.         }
78.         .button-group {
79.             display: flex;
80.             gap: 10px;
81.             margin-top: 15px;
82.         }
83.         button {
84.             padding: 8px 15px;
85.             background-color: #4CAF50;
86.             color: white;
87.             border: none;
88.             border-radius: 4px;
89.             cursor: pointer;
90.         }
91.         button:hover {
92.             background-color: #45a049;
93.         }
94.         button.secondary {
95.             background-color: #2196F3;
96.         }
97.         button.secondary:hover {
98.             background-color: #0b7dda;
99.         }
100.         .message {
101.             margin-top: 10px;
102.             padding: 10px;
103.             border-radius: 4px;
104.             display: none;
105.         }
106.         .success {
107.             background-color: #dff0d8;
108.             color: #3c763d;
109.         }
110.         .error {
111.             background-color: #f2dede;
112.             color: #a94442;
113.         }
114.         /* 高亮样式类 */
115.         .highlight-yellow {
116.             background-color: yellow;
117.         }
118.         .highlight-green {
119.             background-color: #90EE90;
120.         }
121.         .highlight-blue {
122.             background-color: #ADD8E6;
123.         }
124.         .highlight-red {
125.             background-color: #FFB6C1;
126.         }
127.         .highlight-purple {
128.             background-color: #D8BFD8;
129.         }
130.         .highlight-orange {
131.             background-color: #FFD700;
132.         }
133.         .highlight-custom {
134.             padding: 2px 4px;
135.             border-radius: 3px;
136.         }
137.         .highlight-underline {
138.             text-decoration: underline;
139.             text-decoration-style: wavy;
140.             text-decoration-color: red;
141.         }
142.         .highlight-bold {
143.             font-weight: bold;
144.         }
145.         .highlight-italic {
146.             font-style: italic;
147.         }
148.     </style>
149. </head>
150. <body>
151.     <h1>多模式内容高亮工具</h1>
152.    
153.     <div class="container">
154.         <div class="panel">
155.             <div class="panel-title">高亮规则设置</div>
156.             <div class="highlight-controls" id="highlightControls">
157.                 <!-- 默认高亮规则 -->
158.                 <div class="highlight-control">
159.                     <label>
160.                         <input type="checkbox" checked>
161.                         <span>电子邮件</span>
162.                     </label>
163.                     <input type="text" value="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" readonly>
164.                     <select class="highlight-style">
165.                         <option value="highlight-blue">蓝色高亮</option>
166.                         <option value="highlight-green">绿色高亮</option>
167.                         <option value="highlight-yellow">黄色高亮</option>
168.                         <option value="highlight-red">红色高亮</option>
169.                         <option value="highlight-purple">紫色高亮</option>
170.                         <option value="highlight-orange">橙色高亮</option>
171.                         <option value="highlight-underline">下划线</option>
172.                         <option value="highlight-bold">粗体</option>
173.                         <option value="highlight-italic">斜体</option>
174.                         <option value="highlight-custom">自定义颜色</option>
175.                     </select>
176.                     <div class="color-picker" style="display: none;">
177.                         <input type="color" value="#FFFF00">
178.                         <span>背景色</span>
179.                     </div>
180.                 </div>
181.                
182.                 <div class="highlight-control">
183.                     <label>
184.                         <input type="checkbox" checked>
185.                         <span>电话号码</span>
186.                     </label>
187.                     <input type="text" value="(\d{3,4}-?)?\d{7,8}(?=-?\d{3,4})?|-?\d{3,4}-?\d{7,8}" readonly>
188.                     <select class="highlight-style">
189.                         <option value="highlight-blue">蓝色高亮</option>
190.                         <option value="highlight-green" selected>绿色高亮</option>
191.                         <option value="highlight-yellow">黄色高亮</option>
192.                         <option value="highlight-red">红色高亮</option>
193.                         <option value="highlight-purple">紫色高亮</option>
194.                         <option value="highlight-orange">橙色高亮</option>
195.                         <option value="highlight-underline">下划线</option>
196.                         <option value="highlight-bold">粗体</option>
197.                         <option value="highlight-italic">斜体</option>
198.                         <option value="highlight-custom">自定义颜色</option>
199.                     </select>
200.                     <div class="color-picker" style="display: none;">
201.                         <input type="color" value="#90EE90">
202.                         <span>背景色</span>
203.                     </div>
204.                 </div>
205.                
206.                 <div class="highlight-control">
207.                     <label>
208.                         <input type="checkbox" checked>
209.                         <span>网址</span>
210.                     </label>
211.                     <input type="text" value="https?:\/\/[^\s]+" readonly>
212.                     <select class="highlight-style">
213.                         <option value="highlight-blue">蓝色高亮</option>
214.                         <option value="highlight-green">绿色高亮</option>
215.                         <option value="highlight-yellow">黄色高亮</option>
216.                         <option value="highlight-red">红色高亮</option>
217.                         <option value="highlight-purple">紫色高亮</option>
218.                         <option value="highlight-orange" selected>橙色高亮</option>
219.                         <option value="highlight-underline">下划线</option>
220.                         <option value="highlight-bold">粗体</option>
221.                         <option value="highlight-italic">斜体</option>
222.                         <option value="highlight-custom">自定义颜色</option>
223.                     </select>
224.                     <div class="color-picker" style="display: none;">
225.                         <input type="color" value="#FFD700">
226.                         <span>背景色</span>
227.                     </div>
228.                 </div>
229.                
230.                 <div class="highlight-control">
231.                     <label>
232.                         <input type="checkbox">
233.                         <span>日期</span>
234.                     </label>
235.                     <input type="text" value="\d{4}-\d{2}-\d{2}|\d{2}/\d{2}/\d{4}">
236.                     <select class="highlight-style">
237.                         <option value="highlight-blue">蓝色高亮</option>
238.                         <option value="highlight-green">绿色高亮</option>
239.                         <option value="highlight-yellow">黄色高亮</option>
240.                         <option value="highlight-red">红色高亮</option>
241.                         <option value="highlight-purple" selected>紫色高亮</option>
242.                         <option value="highlight-orange">橙色高亮</option>
243.                         <option value="highlight-underline">下划线</option>
244.                         <option value="highlight-bold">粗体</option>
245.                         <option value="highlight-italic">斜体</option>
246.                         <option value="highlight-custom">自定义颜色</option>
247.                     </select>
248.                     <div class="color-picker" style="display: none;">
249.                         <input type="color" value="#D8BFD8">
250.                         <span>背景色</span>
251.                     </div>
252.                 </div>
253.             </div>
254.             
255.             <div class="button-group">
256.                 <button id="addRule">添加规则</button>
257.                 <button id="applyHighlights" class="secondary">应用高亮</button>
258.                 <button id="clearHighlights">清除高亮</button>
259.             </div>
260.             
261.             <div id="message" class="message"></div>
262.         </div>
263.         
264.         <div class="panel">
265.             <div class="panel-title">内容区域</div>
266.             <div class="content-area" id="contentArea">
267.                 <h2>联系我们</h2>
268.                 <p>如果您有任何问题或建议，请通过以下方式联系我们：</p>
269.                 <p>电子邮件：contact@example.com 或 support@example.org</p>
270.                 <p>电话：010-12345678 或 13800138000</p>
271.                 <p>访问我们的网站：https://www.example.com 或 http://blog.example.org</p>
272.                 <p>办公时间：周一至周五，9:00-18:00</p>
273.                 <p>地址：北京市朝阳区某某街道123号</p>
274.                 <p>邮政编码：100020</p>
275.                
276.                 <h2>活动安排</h2>
277.                 <p>2023-06-15：产品发布会</p>
278.                 <p>2023/07/20：夏季促销活动</p>
279.                 <p>2023-08-10：技术研讨会</p>
280.                 <p>2023/09/05：秋季新品展示</p>
281.                
282.                 <h2>价格信息</h2>
283.                 <p>标准版：$99.00</p>
284.                 <p>专业版：¥199.00</p>
285.                 <p>企业版：$299.00</p>
286.                
287.                 <h2>其他联系方式</h2>
288.                 <p>QQ：123456789</p>
289.                 <p>微信：example_company</p>
290.                 <p>微博：@example公司</p>
291.             </div>
292.         </div>
293.     </div>
295.     <script>
296.         // 获取DOM元素
297.         const highlightControls = document.getElementById('highlightControls');
298.         const contentArea = document.getElementById('contentArea');
299.         const messageDiv = document.getElementById('message');
300.         
301.         // 获取按钮
302.         const addRuleBtn = document.getElementById('addRule');
303.         const applyHighlightsBtn = document.getElementById('applyHighlights');
304.         const clearHighlightsBtn = document.getElementById('clearHighlights');
305.         
306.         // 显示消息
307.         function showMessage(text, type) {
308.             messageDiv.textContent = text;
309.             messageDiv.className = 'message ' + type;
310.             messageDiv.style.display = 'block';
311.             
312.             // 3秒后隐藏消息
313.             setTimeout(() => {
314.                 messageDiv.style.display = 'none';
315.             }, 3000);
316.         }
317.         
318.         // 添加高亮规则
319.         function addHighlightRule(name = '', pattern = '', enabled = true, style = 'highlight-yellow', color = '#FFFF00') {
320.             const ruleDiv = document.createElement('div');
321.             ruleDiv.className = 'highlight-control';
322.             
323.             ruleDiv.innerHTML = `
324.                 <label>
325.                     <input type="checkbox" ${enabled ? 'checked' : ''}>
326.                     <span>${name || '自定义规则'}</span>
327.                 </label>
328.                 <input type="text" value="${pattern}" placeholder="输入正则表达式">
329.                 <select class="highlight-style">
330.                     <option value="highlight-blue" ${style === 'highlight-blue' ? 'selected' : ''}>蓝色高亮</option>
331.                     <option value="highlight-green" ${style === 'highlight-green' ? 'selected' : ''}>绿色高亮</option>
332.                     <option value="highlight-yellow" ${style === 'highlight-yellow' ? 'selected' : ''}>黄色高亮</option>
333.                     <option value="highlight-red" ${style === 'highlight-red' ? 'selected' : ''}>红色高亮</option>
334.                     <option value="highlight-purple" ${style === 'highlight-purple' ? 'selected' : ''}>紫色高亮</option>
335.                     <option value="highlight-orange" ${style === 'highlight-orange' ? 'selected' : ''}>橙色高亮</option>
336.                     <option value="highlight-underline" ${style === 'highlight-underline' ? 'selected' : ''}>下划线</option>
337.                     <option value="highlight-bold" ${style === 'highlight-bold' ? 'selected' : ''}>粗体</option>
338.                     <option value="highlight-italic" ${style === 'highlight-italic' ? 'selected' : ''}>斜体</option>
339.                     <option value="highlight-custom" ${style === 'highlight-custom' ? 'selected' : ''}>自定义颜色</option>
340.                 </select>
341.                 <div class="color-picker" style="display: ${style === 'highlight-custom' ? 'flex' : 'none'};">
342.                     <input type="color" value="${color}">
343.                     <span>背景色</span>
344.                 </div>
345.                 <button class="remove-rule" style="margin-top: 5px; padding: 3px 8px; background-color: #f44336;">删除</button>
346.             `;
347.             
348.             highlightControls.appendChild(ruleDiv);
349.             
350.             // 添加事件监听器
351.             const styleSelect = ruleDiv.querySelector('.highlight-style');
352.             const colorPicker = ruleDiv.querySelector('.color-picker');
353.             const removeBtn = ruleDiv.querySelector('.remove-rule');
354.             
355.             styleSelect.addEventListener('change', function() {
356.                 colorPicker.style.display = this.value === 'highlight-custom' ? 'flex' : 'none';
357.             });
358.             
359.             removeBtn.addEventListener('click', function() {
360.                 ruleDiv.remove();
361.             });
362.         }
363.         
364.         // 应用高亮
365.         function applyHighlights() {
366.             // 清除现有高亮
367.             clearHighlights(false);
368.             
369.             // 获取所有规则
370.             const rules = [];
371.             const ruleElements = highlightControls.querySelectorAll('.highlight-control');
372.             
373.             ruleElements.forEach(ruleElement => {
374.                 const enabled = ruleElement.querySelector('input[type="checkbox"]').checked;
375.                 if (!enabled) return;
376.                
377.                 const pattern = ruleElement.querySelector('input[type="text"]').value.trim();
378.                 if (!pattern) return;
379.                
380.                 const style = ruleElement.querySelector('.highlight-style').value;
381.                 const color = style === 'highlight-custom' ?
382.                     ruleElement.querySelector('.color-picker input[type="color"]').value :
383.                     '';
384.                
385.                 rules.push({
386.                     pattern: pattern,
387.                     style: style,
388.                     color: color
389.                 });
390.             });
391.             
392.             if (rules.length === 0) {
393.                 showMessage('没有启用的规则', 'error');
394.                 return;
395.             }
396.             
397.             try {
398.                 // 获取内容区域的所有文本节点
399.                 const walker = document.createTreeWalker(
400.                     contentArea,
401.                     NodeFilter.SHOW_TEXT,
402.                     null,
403.                     false
404.                 );
405.                
406.                 let node;
407.                 const nodesToProcess = [];
408.                
409.                 // 收集所有文本节点
410.                 while (node = walker.nextNode()) {
411.                     // 跳过脚本和样式元素内的文本
412.                     if (node.parentNode.tagName !== 'SCRIPT' && node.parentNode.tagName !== 'STYLE') {
413.                         nodesToProcess.push(node);
414.                     }
415.                 }
416.                
417.                 // 处理每个文本节点
418.                 nodesToProcess.forEach(textNode => {
419.                     const text = textNode.textContent;
420.                     let matches = [];
421.                     
422.                     // 收集所有匹配
423.                     rules.forEach(rule => {
424.                         try {
425.                             const regex = new RegExp(rule.pattern, 'gi');
426.                             let match;
427.                             while ((match = regex.exec(text)) !== null) {
428.                                 matches.push({
429.                                     text: match[0],
430.                                     index: match.index,
431.                                     length: match[0].length,
432.                                     style: rule.style,
433.                                     color: rule.color
434.                                 });
435.                             }
436.                         } catch (error) {
437.                             console.error('正则表达式错误:', error, '模式:', rule.pattern);
438.                         }
439.                     });
440.                     
441.                     // 按索引排序匹配
442.                     matches.sort((a, b) => a.index - b.index);
443.                     
444.                     // 如果没有匹配，跳过此节点
445.                     if (matches.length === 0) return;
446.                     
447.                     // 创建文档片段
448.                     const fragment = document.createDocumentFragment();
449.                     let lastIndex = 0;
450.                     
451.                     // 处理匹配
452.                     matches.forEach(match => {
453.                         // 添加匹配前的文本
454.                         if (match.index > lastIndex) {
455.                             fragment.appendChild(document.createTextNode(text.substring(lastIndex, match.index)));
456.                         }
457.                         
458.                         // 创建匹配文本的span并应用样式
459.                         const span = document.createElement('span');
460.                         span.className = match.style;
461.                         if (match.style === 'highlight-custom') {
462.                             span.style.backgroundColor = match.color;
463.                         }
464.                         span.textContent = match.text;
465.                         fragment.appendChild(span);
466.                         
467.                         lastIndex = match.index + match.length;
468.                     });
469.                     
470.                     // 添加剩余的文本
471.                     if (lastIndex < text.length) {
472.                         fragment.appendChild(document.createTextNode(text.substring(lastIndex)));
473.                     }
474.                     
475.                     // 替换原始文本节点
476.                     textNode.parentNode.replaceChild(fragment, textNode);
477.                 });
478.                
479.                 showMessage(`成功应用了 ${rules.length} 个高亮规则`, 'success');
480.             } catch (error) {
481.                 showMessage('应用高亮时出错: ' + error.message, 'error');
482.                 console.error('应用高亮时出错:', error);
483.             }
484.         }
485.         
486.         // 清除高亮
487.         function clearHighlights(showMessage = true) {
488.             // 获取所有带有高亮样式的span元素
489.             const highlightedSpans = contentArea.querySelectorAll('span[class*="highlight"]');
490.             
491.             highlightedSpans.forEach(span => {
492.                 const parent = span.parentNode;
493.                
494.                 // 用文本节点替换span元素
495.                 parent.replaceChild(document.createTextNode(span.textContent), span);
496.                
497.                 // 合并相邻的文本节点
498.                 parent.normalize();
499.             });
500.             
501.             if (showMessage) {
502.                 showMessage('已清除所有高亮', 'success');
503.             }
504.         }
505.         
506.         // 添加事件监听器
507.         addRuleBtn.addEventListener('click', function() {
508.             addHighlightRule();
509.         });
510.         
511.         applyHighlightsBtn.addEventListener('click', applyHighlights);
512.         clearHighlightsBtn.addEventListener('click', () => clearHighlights(true));
513.         
514.         // 为现有的样式选择器添加事件监听器
515.         document.querySelectorAll('.highlight-control').forEach(control => {
516.             const styleSelect = control.querySelector('.highlight-style');
517.             const colorPicker = control.querySelector('.color-picker');
518.             
519.             if (styleSelect && colorPicker) {
520.                 styleSelect.addEventListener('change', function() {
521.                     colorPicker.style.display = this.value === 'highlight-custom' ? 'flex' : 'none';
522.                 });
523.             }
524.             
525.             const removeBtn = control.querySelector('.remove-rule');
526.             if (removeBtn) {
527.                 removeBtn.addEventListener('click', function() {
528.                     control.remove();
529.                 });
530.             }
531.         });
532.     </script>
533. </body>
534. </html>

复制代码

5.4 数据格式化和展示

以下是一个数据格式化和展示的示例，它使用正则表达式来解析和格式化不同类型的数据：

2. <!DOCTYPE html>
3. <html lang="zh-CN">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>数据格式化和展示</title>
8.     <style>
9.         body {
10.             font-family: Arial, sans-serif;
11.             max-width: 1000px;
12.             margin: 0 auto;
13.             padding: 20px;
14.         }
15.         h1 {
16.             text-align: center;
17.         }
18.         .container {
19.             display: flex;
20.             flex-direction: column;
21.             gap: 20px;
22.         }
23.         .panel {
24.             border: 1px solid #ddd;
25.             border-radius: 5px;
26.             padding: 15px;
27.         }
28.         .panel-title {
29.             font-weight: bold;
30.             margin-bottom: 10px;
31.             font-size: 18px;
32.         }
33.         .input-group {
34.             margin-bottom: 15px;
35.         }
36.         .input-group label {
37.             display: block;
38.             margin-bottom: 5px;
39.             font-weight: bold;
40.         }
41.         textarea {
42.             width: 100%;
43.             height: 150px;
44.             padding: 10px;
45.             border: 1px solid #ddd;
46.             border-radius: 4px;
47.             resize: vertical;
48.             font-family: inherit;
49.         }
50.         .button-group {
51.             display: flex;
52.             gap: 10px;
53.             margin-top: 10px;
54.         }
55.         button {
56.             padding: 8px 15px;
57.             background-color: #4CAF50;
58.             color: white;
59.             border: none;
60.             border-radius: 4px;
61.             cursor: pointer;
62.         }
63.         button:hover {
64.             background-color: #45a049;
65.         }
66.         button.secondary {
67.             background-color: #2196F3;
68.         }
69.         button.secondary:hover {
70.             background-color: #0b7dda;
71.         }
72.         .tabs {
73.             display: flex;
74.             border-bottom: 1px solid #ddd;
75.             margin-bottom: 15px;
76.         }
77.         .tab {
78.             padding: 10px 15px;
79.             cursor: pointer;
80.             border: 1px solid transparent;
81.             border-bottom: none;
82.             border-radius: 4px 4px 0 0;
83.             margin-right: 5px;
84.             background-color: #f1f1f1;
85.         }
86.         .tab.active {
87.             background-color: white;
88.             border-color: #ddd;
89.             border-bottom-color: white;
90.             margin-bottom: -1px;
91.             font-weight: bold;
92.         }
93.         .tab-content {
94.             display: none;
95.         }
96.         .tab-content.active {
97.             display: block;
98.         }
99.         table {
100.             width: 100%;
101.             border-collapse: collapse;
102.             margin-top: 10px;
103.         }
104.         table, th, td {
105.             border: 1px solid #ddd;
106.         }
107.         th, td {
108.             padding: 8px;
109.             text-align: left;
110.         }
111.         th {
112.             background-color: #f2f2f2;
113.         }
114.         tr:nth-child(even) {
115.             background-color: #f9f9f9;
116.         }
117.         .data-card {
118.             border: 1px solid #ddd;
119.             border-radius: 5px;
120.             padding: 15px;
121.             margin-bottom: 15px;
122.             background-color: #f9f9f9;
123.         }
124.         .data-card h3 {
125.             margin-top: 0;
126.             color: #333;
127.         }
128.         .data-card .data-item {
129.             margin-bottom: 8px;
130.         }
131.         .data-card .data-label {
132.             font-weight: bold;
133.             display: inline-block;
134.             width: 120px;
135.         }
136.         .message {
137.             margin-top: 10px;
138.             padding: 10px;
139.             border-radius: 4px;
140.             display: none;
141.         }
142.         .success {
143.             background-color: #dff0d8;
144.             color: #3c763d;
145.         }
146.         .error {
147.             background-color: #f2dede;
148.             color: #a94442;
149.         }
150.         .no-data {
151.             text-align: center;
152.             padding: 20px;
153.             color: #666;
154.         }
155.     </style>
156. </head>
157. <body>
158.     <h1>数据格式化和展示工具</h1>
159.    
160.     <div class="container">
161.         <div class="panel">
162.             <div class="panel-title">输入数据</div>
163.             <div class="input-group">
164.                 <label for="inputData">输入原始数据 (支持多种格式):</label>
165.                 <textarea id="inputData" placeholder="在此输入要格式化的数据，例如：
166. 姓名: 张三, 年龄: 30, 邮箱: zhangsan@example.com, 电话: 13800138000
167. 姓名: 李四, 年龄: 25, 邮箱: lisi@example.com, 电话: 13900139000
168. 姓名: 王五, 年龄: 35, 邮箱: wangwu@example.com, 电话: 13700137000"></textarea>
169.             </div>
170.             <div class="button-group">
171.                 <button id="parseData">解析数据</button>
172.                 <button id="clearData" class="secondary">清除数据</button>
173.                 <button id="loadSample" class="secondary">加载示例数据</button>
174.             </div>
175.             <div id="message" class="message"></div>
176.         </div>
177.         
178.         <div class="panel">
179.             <div class="panel-title">格式化结果</div>
180.             <div class="tabs">
181.                 <div class="tab active" data-tab="table">表格视图</div>
182.                 <div class="tab" data-tab="cards">卡片视图</div>
183.                 <div class="tab" data-tab="json">JSON视图</div>
184.             </div>
185.             
186.             <div id="tableTab" class="tab-content active">
187.                 <div id="tableContainer">
188.                     <div class="no-data">暂无数据，请先输入并解析数据</div>
189.                 </div>
190.             </div>
191.             
192.             <div id="cardsTab" class="tab-content">
193.                 <div id="cardsContainer">
194.                     <div class="no-data">暂无数据，请先输入并解析数据</div>
195.                 </div>
196.             </div>
197.             
198.             <div id="jsonTab" class="tab-content">
199.                 <div class="input-group">
200.                     <label for="jsonOutput">JSON格式数据:</label>
201.                     <textarea id="jsonOutput" readonly placeholder="JSON格式的数据将显示在这里..."></textarea>
202.                 </div>
203.             </div>
204.         </div>
205.     </div>
207.     <script>
208.         // 获取DOM元素
209.         const inputData = document.getElementById('inputData');
210.         const messageDiv = document.getElementById('message');
211.         const tableContainer = document.getElementById('tableContainer');
212.         const cardsContainer = document.getElementById('cardsContainer');
213.         const jsonOutput = document.getElementById('jsonOutput');
214.         
215.         // 获取按钮
216.         const parseDataBtn = document.getElementById('parseData');
217.         const clearDataBtn = document.getElementById('clearData');
218.         const loadSampleBtn = document.getElementById('loadSample');
219.         
220.         // 获取标签页
221.         const tabs = document.querySelectorAll('.tab');
222.         const tabContents = document.querySelectorAll('.tab-content');
223.         
224.         // 存储解析后的数据
225.         let parsedData = [];
226.         
227.         // 显示消息
228.         function showMessage(text, type) {
229.             messageDiv.textContent = text;
230.             messageDiv.className = 'message ' + type;
231.             messageDiv.style.display = 'block';
232.             
233.             // 3秒后隐藏消息
234.             setTimeout(() => {
235.                 messageDiv.style.display = 'none';
236.             }, 3000);
237.         }
238.         
239.         // 标签页切换
240.         tabs.forEach(tab => {
241.             tab.addEventListener('click', function() {
242.                 const tabId = this.getAttribute('data-tab');
243.                
244.                 // 移除所有活动状态
245.                 tabs.forEach(t => t.classList.remove('active'));
246.                 tabContents.forEach(c => c.classList.remove('active'));
247.                
248.                 // 添加当前活动状态
249.                 this.classList.add('active');
250.                 document.getElementById(tabId + 'Tab').classList.add('active');
251.             });
252.         });
253.         
254.         // 解析数据
255.         function parseData() {
256.             const input = inputData.value.trim();
257.             if (!input) {
258.                 showMessage('请输入数据', 'error');
259.                 return;
260.             }
261.             
262.             try {
263.                 // 尝试解析不同格式的数据
264.                 parsedData = [];
265.                
266.                 // 尝试解析键值对格式 (例如: 姓名: 张三, 年龄: 30)
267.                 if (input.includes(':') && (input.includes(',') || input.includes('\n'))) {
268.                     parseKeyValueFormat(input);
269.                 }
270.                 // 尝试解析CSV格式
271.                 else if (input.includes(',')) {
272.                     parseCSVFormat(input);
273.                 }
274.                 // 尝试解析JSON格式
275.                 else if (input.startsWith('[') || input.startsWith('{')) {
276.                     parseJSONFormat(input);
277.                 }
278.                 // 尝试解析每行一个记录的格式
279.                 else if (input.includes('\n')) {
280.                     parseLineFormat(input);
281.                 }
282.                 else {
283.                     showMessage('无法识别的数据格式', 'error');
284.                     return;
285.                 }
286.                
287.                 if (parsedData.length === 0) {
288.                     showMessage('未能解析出有效数据', 'error');
289.                     return;
290.                 }
291.                
292.                 // 显示解析结果
293.                 displayData();
294.                 showMessage(`成功解析了 ${parsedData.length} 条记录`, 'success');
295.                
296.             } catch (error) {
297.                 showMessage('解析数据时出错: ' + error.message, 'error');
298.                 console.error('解析数据时出错:', error);
299.             }
300.         }
301.         
302.         // 解析键值对格式
303.         function parseKeyValueFormat(input) {
304.             const lines = input.split('\n');
305.             let currentRecord = {};
306.             
307.             lines.forEach(line => {
308.                 line = line.trim();
309.                 if (!line) return;
310.                
311.                 // 使用正则表达式匹配键值对
312.                 const keyValuePairs = line.match(/([^:,\s]+)\s*:\s*([^,]+)/g);
313.                
314.                 if (keyValuePairs) {
315.                     // 如果是新记录，保存上一条记录
316.                     if (Object.keys(currentRecord).length > 0) {
317.                         parsedData.push(currentRecord);
318.                         currentRecord = {};
319.                     }
320.                     
321.                     // 解析键值对
322.                     keyValuePairs.forEach(pair => {
323.                         const match = pair.match(/([^:,\s]+)\s*:\s*([^,]+)/);
324.                         if (match) {
325.                             const key = match[1].trim();
326.                             const value = match[2].trim();
327.                            
328.                             // 尝试转换数值
329.                             if (/^\d+$/.test(value)) {
330.                                 currentRecord[key] = parseInt(value, 10);
331.                             } else if (/^\d+\.\d+$/.test(value)) {
332.                                 currentRecord[key] = parseFloat(value);
333.                             } else {
334.                                 currentRecord[key] = value;
335.                             }
336.                         }
337.                     });
338.                 }
339.             });
340.             
341.             // 添加最后一条记录
342.             if (Object.keys(currentRecord).length > 0) {
343.                 parsedData.push(currentRecord);
344.             }
345.         }
346.         
347.         // 解析CSV格式
348.         function parseCSVFormat(input) {
349.             const lines = input.split('\n');
350.             if (lines.length < 2) return;
351.             
352.             // 解析标题行
353.             const headers = lines[0].split(',').map(h => h.trim());
354.             
355.             // 解析数据行
356.             for (let i = 1; i < lines.length; i++) {
357.                 const line = lines[i].trim();
358.                 if (!line) continue;
359.                
360.                 const values = line.split(',').map(v => v.trim());
361.                 if (values.length !== headers.length) continue;
362.                
363.                 const record = {};
364.                 headers.forEach((header, index) => {
365.                     const value = values[index];
366.                     
367.                     // 尝试转换数值
368.                     if (/^\d+$/.test(value)) {
369.                         record[header] = parseInt(value, 10);
370.                     } else if (/^\d+\.\d+$/.test(value)) {
371.                         record[header] = parseFloat(value);
372.                     } else {
373.                         record[header] = value;
374.                     }
375.                 });
376.                
377.                 parsedData.push(record);
378.             }
379.         }
380.         
381.         // 解析JSON格式
382.         function parseJSONFormat(input) {
383.             const data = JSON.parse(input);
384.             
385.             if (Array.isArray(data)) {
386.                 parsedData = data;
387.             } else if (typeof data === 'object') {
388.                 parsedData = [data];
389.             }
390.         }
391.         
392.         // 解析每行一个记录的格式
393.         function parseLineFormat(input) {
394.             const lines = input.split('\n');
395.             
396.             lines.forEach(line => {
397.                 line = line.trim();
398.                 if (!line) return;
399.                
400.                 // 尝试提取常见数据类型
401.                 const record = {};
402.                
403.                 // 提取电子邮件
404.                 const emailMatch = line.match(/([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/);
405.                 if (emailMatch) {
406.                     record['邮箱'] = emailMatch[0];
407.                 }
408.                
409.                 // 提取电话号码
410.                 const phoneMatch = line.match(/(\d{3,4}-?)?\d{7,8}(?=-?\d{3,4})?|-?\d{3,4}-?\d{7,8}/);
411.                 if (phoneMatch) {
412.                     record['电话'] = phoneMatch[0];
413.                 }
414.                
415.                 // 提取日期
416.                 const dateMatch = line.match(/(\d{4}-\d{2}-\d{2}|\d{2}\/\d{2}\/\d{4})/);
417.                 if (dateMatch) {
418.                     record['日期'] = dateMatch[0];
419.                 }
420.                
421.                 // 提取URL
422.                 const urlMatch = line.match(/(https?:\/\/[^\s]+)/);
423.                 if (urlMatch) {
424.                     record['网址'] = urlMatch[0];
425.                 }
426.                
427.                 // 提取数字
428.                 const numberMatches = line.match(/\d+\.?\d*/g);
429.                 if (numberMatches) {
430.                     numberMatches.forEach((num, index) => {
431.                         const key = index === 0 ? '数值' : `数值${index + 1}`;
432.                         if (num.includes('.')) {
433.                             record[key] = parseFloat(num);
434.                         } else {
435.                             record[key] = parseInt(num, 10);
436.                         }
437.                     });
438.                 }
439.                
440.                 // 如果没有提取到任何数据，将整行作为内容
441.                 if (Object.keys(record).length === 0) {
442.                     record['内容'] = line;
443.                 }
444.                
445.                 parsedData.push(record);
446.             });
447.         }
448.         
449.         // 显示数据
450.         function displayData() {
451.             // 显示表格视图
452.             displayTableView();
453.             
454.             // 显示卡片视图
455.             displayCardsView();
456.             
457.             // 显示JSON视图
458.             displayJSONView();
459.         }
460.         
461.         // 显示表格视图
462.         function displayTableView() {
463.             if (parsedData.length === 0) {
464.                 tableContainer.innerHTML = '<div class="no-data">暂无数据</div>';
465.                 return;
466.             }
467.             
468.             // 获取所有可能的列
469.             const columns = new Set();
470.             parsedData.forEach(record => {
471.                 Object.keys(record).forEach(key => columns.add(key));
472.             });
473.             
474.             // 创建表格
475.             let tableHTML = '<table><thead><tr>';
476.             Array.from(columns).forEach(column => {
477.                 tableHTML += `<th>${column}</th>`;
478.             });
479.             tableHTML += '</tr></thead><tbody>';
480.             
481.             // 添加数据行
482.             parsedData.forEach(record => {
483.                 tableHTML += '<tr>';
484.                 Array.from(columns).forEach(column => {
485.                     const value = record[column] !== undefined ? record[column] : '';
486.                     tableHTML += `<td>${value}</td>`;
487.                 });
488.                 tableHTML += '</tr>';
489.             });
490.             
491.             tableHTML += '</tbody></table>';
492.             tableContainer.innerHTML = tableHTML;
493.         }
494.         
495.         // 显示卡片视图
496.         function displayCardsView() {
497.             if (parsedData.length === 0) {
498.                 cardsContainer.innerHTML = '<div class="no-data">暂无数据</div>';
499.                 return;
500.             }
501.             
502.             let cardsHTML = '';
503.             
504.             parsedData.forEach((record, index) => {
505.                 cardsHTML += '<div class="data-card">';
506.                 cardsHTML += `<h3>记录 ${index + 1}</h3>`;
507.                
508.                 Object.keys(record).forEach(key => {
509.                     cardsHTML += `<div class="data-item">`;
510.                     cardsHTML += `<span class="data-label">${key}:</span>`;
511.                     cardsHTML += `<span>${record[key]}</span>`;
512.                     cardsHTML += `</div>`;
513.                 });
514.                
515.                 cardsHTML += '</div>';
516.             });
517.             
518.             cardsContainer.innerHTML = cardsHTML;
519.         }
520.         
521.         // 显示JSON视图
522.         function displayJSONView() {
523.             if (parsedData.length === 0) {
524.                 jsonOutput.value = '';
525.                 return;
526.             }
527.             
528.             try {
529.                 const jsonString = JSON.stringify(parsedData, null, 2);
530.                 jsonOutput.value = jsonString;
531.             } catch (error) {
532.                 jsonOutput.value = 'JSON序列化错误: ' + error.message;
533.             }
534.         }
535.         
536.         // 清除数据
537.         function clearData() {
538.             inputData.value = '';
539.             parsedData = [];
540.             tableContainer.innerHTML = '<div class="no-data">暂无数据，请先输入并解析数据</div>';
541.             cardsContainer.innerHTML = '<div class="no-data">暂无数据，请先输入并解析数据</div>';
542.             jsonOutput.value = '';
543.             showMessage('数据已清除', 'success');
544.         }
545.         
546.         // 加载示例数据
547.         function loadSampleData() {
548.             const sampleData = `姓名: 张三, 年龄: 30, 邮箱: zhangsan@example.com, 电话: 13800138000, 部门: 技术部
549. 姓名: 李四, 年龄: 25, 邮箱: lisi@example.com, 电话: 13900139000, 部门: 市场部
550. 姓名: 王五, 年龄: 35, 邮箱: wangwu@example.com, 电话: 13700137000, 部门: 人事部
551. 姓名: 赵六, 年龄: 28, 邮箱: zhaoliu@example.com, 电话: 13600136000, 部门: 财务部
552. 姓名: 钱七, 年龄: 32, 邮箱: qianqi@example.com, 电话: 13500135000, 部门: 技术部`;
553.             
554.             inputData.value = sampleData;
555.             showMessage('示例数据已加载', 'success');
556.         }
557.         
558.         // 添加事件监听器
559.         parseDataBtn.addEventListener('click', parseData);
560.         clearDataBtn.addEventListener('click', clearData);
561.         loadSampleBtn.addEventListener('click', loadSampleData);
562.     </script>
563. </body>
564. </html>

复制代码

6. 性能优化和最佳实践

6.1 正则表达式性能优化

正则表达式虽然强大，但如果使用不当可能会导致性能问题。以下是一些优化正则表达式性能的最佳实践：

贪婪匹配（使用*和+量词）会尝试匹配尽可能多的字符，这可能导致大量的回溯操作。在可能的情况下，使用惰性匹配（*?和+?）或更精确的匹配模式。

2. // 不推荐的贪婪匹配
3. const html = '<div>内容1</div><div>内容2</div>';
4. const matches = html.match(/<div>.*<\/div>/g); // 匹配整个字符串
6. // 推荐的惰性匹配
7. const matches = html.match(/<div>.*?<\/div>/g); // 分别匹配两个div

复制代码

字符类（如[abc]）通常比选择（如(a|b|c)）更高效。

2. // 不推荐的选择
3. const pattern = /(a|b|c)/;
5. // 推荐的字符类
6. const pattern = /[abc]/;

复制代码

捕获组会消耗额外的内存和处理时间。如果不需要引用匹配的组，使用非捕获组(?:...)。

2. // 不推荐的捕获组
3. const pattern = /(\d{4})-(\d{2})-(\d{2})/;
5. // 推荐的非捕获组（如果不需要引用）
6. const pattern = /(?:\d{4})-(?:\d{2})-(?:\d{2})/;

复制代码

如果可能，使用锚点（如^和$）来限制匹配范围，这样可以减少不必要的匹配尝试。

2. // 不推荐的无锚点匹配
3. const pattern = /error/;
5. // 推荐的有锚点匹配（如果知道错误在行首）
6. const pattern = /^error/;

复制代码

如果同一个正则表达式会被多次使用，预编译它可以提高性能。

2. // 不推荐的每次创建新正则表达式
3. function validateEmail(email) {
4.     return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
5. }
7. // 推荐的预编译正则表达式
8. const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
9. function validateEmail(email) {
10.     return emailRegex.test(email);
11. }

复制代码

6.2 DOM操作性能优化

DOM操作是前端开发中的常见性能瓶颈。以下是一些优化DOM操作性能的最佳实践：

DOM访问是昂贵的操作，应该尽量减少。缓存DOM查询结果，避免重复查询。

2. // 不推荐的重复DOM查询
3. function updateItems() {
4.     const items = document.querySelectorAll('.item');
5.     items.forEach(item => {
6.         item.style.color = 'red';
7.     });
8.    
9.     // 其他操作...
10.    
11.     // 再次查询相同的元素
12.     const items2 = document.querySelectorAll('.item');
13.     items2.forEach(item => {
14.         item.style.backgroundColor = 'yellow';
15.     });
16. }
18. // 推荐的缓存DOM查询结果
19. function updateItems() {
20.     const items = document.querySelectorAll('.item');
21.    
22.     items.forEach(item => {
23.         item.style.color = 'red';
24.     });
25.    
26.     // 其他操作...
27.    
28.     // 使用缓存的元素
29.     items.forEach(item => {
30.         item.style.backgroundColor = 'yellow';
31.     });
32. }

复制代码

当需要添加多个DOM元素时，使用文档片段（DocumentFragment）可以减少重排和重绘。

2. // 不推荐的直接添加多个元素
3. function addItems(items) {
4.     const container = document.getElementById('container');
5.     items.forEach(item => {
6.         const div = document.createElement('div');
7.         div.textContent = item;
8.         container.appendChild(div);
9.     });
10. }
12. // 推荐的使用文档片段
13. function addItems(items) {
14.     const container = document.getElementById('container');
15.     const fragment = document.createDocumentFragment();
16.    
17.     items.forEach(item => {
18.         const div = document.createElement('div');
19.         div.textContent = item;
20.         fragment.appendChild(div);
21.     });
22.    
23.     container.appendChild(fragment);
24. }

复制代码

避免频繁修改单个元素的样式，而是通过修改类名来批量更新样式。

2. // 不推荐的逐个修改样式
3. function highlightItems() {
4.     const items = document.querySelectorAll('.item');
5.     items.forEach(item => {
6.         item.style.color = 'red';
7.         item.style.backgroundColor = 'yellow';
8.         item.style.fontWeight = 'bold';
9.     });
10. }
12. // 推荐的通过类名批量更新样式
13. function highlightItems() {
14.     const items = document.querySelectorAll('.item');
15.     items.forEach(item => {
16.         item.classList.add('highlight');
17.     });
18. }
20. // CSS中定义.highlight类
21. // .highlight {
22. //     color: red;
23. //     background-color: yellow;
24. //     font-weight: bold;
25. // }

复制代码

当需要为多个元素添加相同的事件处理程序时，使用事件委托可以减少内存使用和提高性能。

2. // 不推荐的为每个元素添加事件监听器
3. function setupItemHandlers() {
4.     const items = document.querySelectorAll('.item');
5.     items.forEach(item => {
6.         item.addEventListener('click', function() {
7.             console.log('Item clicked:', this.textContent);
8.         });
9.     });
10. }
12. // 推荐的事件委托
13. function setupItemHandlers() {
14.     const container = document.getElementById('container');
15.     container.addEventListener('click', function(event) {
16.         if (event.target.classList.contains('item')) {
17.             console.log('Item clicked:', event.target.textContent);
18.         }
19.     });
20. }

复制代码

避免在JavaScript中读取布局信息后立即修改布局，这会导致强制同步布局，影响性能。

2. // 不推荐的强制同步布局
3. function updateElement() {
4.     const element = document.getElementById('myElement');
5.     // 读取布局信息
6.     const width = element.offsetWidth;
7.     // 立即修改布局
8.     element.style.height = width * 2 + 'px';
9. }
11. // 推荐的分离读写操作
12. function updateElement() {
13.     const element = document.getElementById('myElement');
14.     // 先读取所有布局信息
15.     const width = element.offsetWidth;
16.     const height = element.offsetHeight;
17.    
18.     // 然后进行所有布局修改
19.     element.style.height = width * 2 + 'px';
20.     element.style.width = height * 2 + 'px';
21. }

复制代码

6.3 代码组织和可维护性

良好的代码组织和可维护性是长期项目成功的关键。以下是一些最佳实践：

将代码组织成模块，每个模块负责特定的功能。

2. // regexUtils.js - 正则表达式工具模块
3. export const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
4. export const phoneRegex = /^1[3-9]\d{9}$/;
6. export function validateEmail(email) {
7.     return emailRegex.test(email);
8. }
10. export function validatePhone(phone) {
11.     return phoneRegex.test(phone);
12. }
14. // domUtils.js - DOM操作工具模块
15. export function createElement(tag, attributes, content) {
16.     const element = document.createElement(tag);
17.    
18.     if (attributes) {
19.         Object.keys(attributes).forEach(key => {
20.             element.setAttribute(key, attributes[key]);
21.         });
22.     }
23.    
24.     if (content) {
25.         element.textContent = content;
26.     }
27.    
28.     return element;
29. }
31. export function addClass(element, className) {
32.     element.classList.add(className);
33. }
35. // main.js - 主模块
36. import { validateEmail, validatePhone } from './regexUtils.js';
37. import { createElement, addClass } from './domUtils.js';
39. function processForm(formData) {
40.     if (!validateEmail(formData.email)) {
41.         showError('邮箱格式不正确');
42.         return false;
43.     }
44.    
45.     if (!validatePhone(formData.phone)) {
46.         showError('手机号格式不正确');
47.         return false;
48.     }
49.    
50.     // 处理表单数据...
51.     return true;
52. }

复制代码

使用适当的设计模式可以提高代码的可维护性和可扩展性。

2. // 策略模式 - 用于不同的验证策略
3. class Validator {
4.     constructor(strategy) {
5.         this.strategy = strategy;
6.     }
7.    
8.     validate(value) {
9.         return this.strategy.validate(value);
10.     }
11. }
13. class EmailValidator {
14.     validate(email) {
15.         return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
16.     }
17. }
19. class PhoneValidator {
20.     validate(phone) {
21.         return /^1[3-9]\d{9}$/.test(phone);
22.     }
23. }
25. // 使用策略模式
26. const emailValidator = new Validator(new EmailValidator());
27. const phoneValidator = new Validator(new PhoneValidator());
29. console.log(emailValidator.validate('test@example.com')); // true
30. console.log(phoneValidator.validate('13800138000')); // true

复制代码

编写可测试的代码可以提高代码质量和可维护性。

2. // 可测试的验证函数
3. function validateInput(input, pattern) {
4.     if (!input || !pattern) {
5.         return { isValid: false, error: '输入和模式不能为空' };
6.     }
7.    
8.     try {
9.         const regex = new RegExp(pattern);
10.         const isValid = regex.test(input);
11.         return { isValid, error: isValid ? '' : '输入格式不正确' };
12.     } catch (error) {
13.         return { isValid: false, error: '正则表达式错误: ' + error.message };
14.     }
15. }
17. // 测试用例
18. function testValidateInput() {
19.     // 测试邮箱验证
20.     const emailResult = validateInput('test@example.com', '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$');
21.     console.assert(emailResult.isValid === true, '邮箱验证测试失败');
22.    
23.     // 测试无效邮箱
24.     const invalidEmailResult = validateInput('invalid-email', '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$');
25.     console.assert(invalidEmailResult.isValid === false, '无效邮箱验证测试失败');
26.    
27.     // 测试空输入
28.     const emptyResult = validateInput('', '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$');
29.     console.assert(emptyResult.isValid === false, '空输入验证测试失败');
30.    
31.     console.log('所有测试通过');
32. }
34. testValidateInput();

复制代码

良好的注释和文档可以提高代码的可读性和可维护性。

2. /**
3. * 验证邮箱地址格式
4. * @param {string} email - 要验证的邮箱地址
5. * @returns {boolean} - 如果邮箱格式正确返回true，否则返回false
6. *
7. * @example
8. * // 返回 true
9. * validateEmail('test@example.com');
10. *
11. * @example
12. * // 返回 false
13. * validateEmail('invalid-email');
14. */
15. function validateEmail(email) {
16.     if (!email || typeof email !== 'string') {
17.         return false;
18.     }
19.    
20.     // 邮箱正则表达式，支持大多数常见邮箱格式
21.     const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
22.     return emailRegex.test(email);
23. }

复制代码

7. 结论

正则表达式和JavaScript DOM操作是前端开发中的两项核心技术，它们结合使用可以创建高效、动态且用户友好的网页。通过本文的学习，我们了解了：

1. 正则表达式的基础知识和常用模式，以及如何在JavaScript中使用它们进行文本匹配和处理。
2. JavaScript DOM操作的基本方法，包括选择、修改、创建和删除DOM元素，以及事件处理。
3. 如何结合正则表达式和DOM操作实现表单验证、动态搜索和过滤、文本处理和格式化、动态样式应用等功能。
4. 通过实战案例，我们看到了这些技术在实际应用中的强大功能。
5. 性能优化和最佳实践，帮助我们编写更高效、更可维护的代码。

掌握这些技能将大大提升你的前端开发能力，使你能够创建更加动态、交互性更强的网页应用。继续实践和探索，你会发现正则表达式和DOM操作的更多可能性，为你的项目带来更大的价值。

7.1 进一步学习的资源

如果你想进一步深入学习正则表达式和JavaScript DOM操作，以下资源可能会有所帮助：

1. MDN Web文档：正则表达式文档对象模型 (DOM)
2. 正则表达式
3. 文档对象模型 (DOM)
4. 书籍：《JavaScript高级程序设计》（第4版）- Nicholas C. Zakas《JavaScript权威指南》（第7版）- David Flanagan《正则表达式必知必会》- Ben Forta
5. 《JavaScript高级程序设计》（第4版）- Nicholas C. Zakas
6. 《JavaScript权威指南》（第7版）- David Flanagan
7. 《正则表达式必知必会》- Ben Forta
8. 在线工具：RegExr- 正则表达式学习和测试工具Regex101- 正则表达式测试和调试工具JSFiddle- 在线JavaScript代码编辑和测试
9. RegExr- 正则表达式学习和测试工具
10. Regex101- 正则表达式测试和调试工具
11. JSFiddle- 在线JavaScript代码编辑和测试
12. 课程：Coursera上的”JavaScript, jQuery, and JSON”课程Udemy上的”JavaScript: Understanding the Weird Parts”课程Frontend Masters上的”JavaScript: The Hard Parts”课程
13. Coursera上的”JavaScript, jQuery, and JSON”课程
14. Udemy上的”JavaScript: Understanding the Weird Parts”课程
15. Frontend Masters上的”JavaScript: The Hard Parts”课程

MDN Web文档：

• 正则表达式
• 文档对象模型 (DOM)

书籍：

• 《JavaScript高级程序设计》（第4版）- Nicholas C. Zakas
• 《JavaScript权威指南》（第7版）- David Flanagan
• 《正则表达式必知必会》- Ben Forta

在线工具：

• RegExr- 正则表达式学习和测试工具
• Regex101- 正则表达式测试和调试工具
• JSFiddle- 在线JavaScript代码编辑和测试

课程：

• Coursera上的”JavaScript, jQuery, and JSON”课程
• Udemy上的”JavaScript: Understanding the Weird Parts”课程
• Frontend Masters上的”JavaScript: The Hard Parts”课程

通过不断学习和实践，你将能够更加熟练地运用正则表达式和DOM操作，创建出更加出色的前端应用。