点击按钮时需用javascript遍历input（排除hidden/checkbox/radio）和textarea，用正则清除零宽字符、bom、null等非法字符并trim，注意dom加载时机、框架响应式同步及disabled状态处理。
点击按钮时清空所有 input 和 textarea 的非法字符
直接清除“无效字符”不是浏览器原生支持的操作——HTML 按钮本身不识别哪些字符算“无效”，必须由 JavaScript 明确定义规则。常见需求其实是：清除全角空格、零宽字符、BOM、控制字符（如 \u200b、\ufeff、\u0000），或按业务规则过滤（如只保留中文、数字、字母）。所以核心是绑定按钮点击事件，遍历表单控件并执行清洗逻辑。
input 和 textarea 值清洗的常用正则表达式
不同“无效字符”需不同正则，不能一招通吃。比如用户粘贴 Word 内容常带零宽空格（\u200b）、字节序标记（\ufeff），而爬虫数据可能混入 NULL 字符（\u0000）或换行符（\r\n）：
-
/[\u200b\u200c\u200d\ufeff\u0000]/g—— 清除零宽字符和 BOM -
/[^\u4e00-\u9fa5a-zA-Z0-9\s\.\,\!\?\(\)\[\]\{\}\'\"\-]/g—— 仅保留中英文、数字、常见标点（按需调整） -
/^\s+|\s+$/g—— 仅去首尾空白（注意：这不处理中间全角空格）
推荐组合使用：.replace(/[\u200b\u200c\u200d\ufeff\u0000]/g, '').trim()，再根据业务加第二层过滤。
批量清洗时容易漏掉的 DOM 元素类型
只选 input 不够——textarea、富文本编辑器的 contenteditable 区域、甚至某些 UI 库生成的隐藏 input[type="hidden"] 都可能存脏数据。实际清洗范围应明确：
- 必须包含：
input:not([type="hidden"])、textarea - 建议检查：
[contenteditable="true"]（需用innerText或textContent获取并清洗） - 避开：
input[type="checkbox"]、input[type="radio"]、select——它们值是选项 ID，不是用户输入文本 - 注意：
input[type="file"]无法通过 JS 修改其value，清洗无效
按钮点击后触发清洗但页面没反应？检查这几点
常见静默失败原因不是代码写错，而是 DOM 加载时机或权限问题：
- 脚本放在
里，但 DOM 还没加载完成 → 改用DOMContentLoaded或把 script 放在前 - 用了
innerHTML动态插入表单 → 新增元素不在初始查询结果中 → 改用事件委托或重新查询 - 某些框架（如 Vue/React）绑定的是响应式数据，直接改 DOM 值不会触发更新 → 必须同步修改对应 data 属性或调用
setState - 输入框被设为
readonly或disabled→disabled元素的value无法被 JS 修改，需先启用再操作
最简健壮写法示例：
document.getElementById('cleanBtn').addEventListener('click', () => {
document.querySelectorAll('input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea').forEach(el => {
if (!el.disabled) {
el.value = el.value.replace(/[\u200b\u200c\u200d\ufeff\u0000]/g, '').trim();
}
});
});
真正麻烦的永远不是正则怎么写，而是你根本不知道用户从哪粘过来的字符——有些字体符号（如 ａ 全角 a）和形近字（如 ｌ 小写 L 和 1）得靠业务规则判断，这时候正则就力不从心了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
