JavaScript实现表单文本域手机号的自动筛选与计数
在Web开发中，经常需要处理表单文本域中的输入内容，比如从一段文本中筛选出所有有效的手机号并进行计数。本文将介绍如何使用JavaScript实现这一功能，无需依赖第三方库，仅用原生JS即可完成。
需求分析
我们要实现的核心功能如下：
监听表单文本域的输入事件，实时获取输入内容
从输入内容中筛选出符合规则的手机号
统计筛选出的手机号数量并展示
支持去重，避免重复统计同一个手机号
手机号规则说明
国内手机号一般为11位数字，且第二位数字常见范围在3-9之间，我们可以使用正则表达式1[3-9]d{9}来匹配符合规则的手机号。如果需要更严格的校验，可以根据运营商号段调整正则规则，本文以通用规则为例。
实现步骤
1. 构建基础HTML结构
首先创建表单文本域和用于展示结果的区域，相关HTML标签需要正确转义：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手机号筛选计数</title> </head> <body> <div class="container"> <h3>请输入包含手机号的文本内容：</h3> <textarea id="textArea" rows="6" cols="50" placeholder="输入文本，例如：我的手机号是13812345678，同事的是13987654321，重复的13812345678只统计一次"></textarea> <div class="result"> <p>筛选到手机号数量：<strong id="count">0</strong></p> <p>手机号列表：</p> <ul id="phoneList"></ul> </div> </div> <script src="script.js"></script> </body> </html>
2. 编写JavaScript逻辑
接下来实现核心的筛选和计数逻辑，代码放在script.js文件中：
// 获取DOM元素
const textArea = document.getElementById('textArea');
const countEl = document.getElementById('count');
const phoneListEl = document.getElementById('phoneList');
// 手机号匹配正则
const phoneReg = /1[3-9]d{9}/g;
// 处理输入事件
textArea.addEventListener('input', function() {
const inputText = this.value;
// 使用正则匹配所有符合规则的手机号
const matchResult = inputText.match(phoneReg);
// 去重处理
const uniquePhones = matchResult ? [...new Set(matchResult)] : [];
// 更新计数
countEl.textContent = uniquePhones.length;
// 更新手机号列表
phoneListEl.innerHTML = '';
uniquePhones.forEach(phone => {
const li = document.createElement('li');
li.textContent = phone;
phoneListEl.appendChild(li);
});
});功能测试
将HTML和JS文件部署后，访问https://www.ipipp.com查看效果，在文本域中输入以下内容测试：
我的手机号是13812345678，同事的是13987654321，另一个是15811112222，重复的13812345678只统计一次，无效号码12345678901不会被匹配。
输入后可以看到计数显示为3，列表中也只展示3个去重后的有效手机号，符合预期效果。
扩展优化
如果需要进一步增强功能，可以做以下扩展：
增加手机号有效性校验，比如调用https://www.ipipp.com的API验证号段是否存在
添加复制筛选结果的功能，方便用户使用
支持自定义手机号匹配规则，允许用户修改正则表达式
增加错误提示，当输入内容不包含有效手机号时给出友好提示
总结
本文通过原生JavaScript结合正则表达式，实现了表单文本域中手机号的自动筛选与计数功能，整个实现过程逻辑清晰，代码量小，易于理解和维护。开发者可以根据实际业务需求调整正则规则或扩展功能，满足更多场景的使用要求。