JavaScript 字符串过滤的实用方法
字符串处理是前端开发中的常见任务。我们经常需要处理用户输入、清理数据或提取特定内容。比如，保留数字、去除空格、过滤特殊字符等。
很多新手可能会用 for 循环逐个判断字符，其实有更简单高效的做法。下面介绍两种常用方法：正则表达式和 filter 方法。
一、两种常用方法
正则表达式：用特定模式匹配文本，适合大多数情况
filter 方法：将字符串转为数组后过滤，逻辑更清晰
二、实际应用场景
场景一：只保留数字
正则表达式写法：
const str = "a1b2c3";
console.log(str.replace(/\D/g, "")); // 输出：123这里 \D 表示所有非数字字符，用空字符串替换它们，就只剩下数字。
filter 写法：
const str = "a1b2c3";
const result = str
.split("")
.filter(ch => !isNaN(ch))
.join("");
console.log(result); // 输出：123先将字符串拆成字符数组，过滤出数字字符，再重新组合成字符串。
场景二：去除空格
正则表达式写法：
const str = " 1 2 3 ";
console.log(str.replace(/\s/g, "")); // 输出：123\s 匹配所有空白字符，包括空格、制表符等。
filter 写法：
const str = " 1 2 3 ";
const result = str.split("").filter(ch => ch !== " ").join("");
console.log(result); // 输出：123直接过滤掉空格字符，保留其他字符。
场景三：去除指定字符
正则表达式写法：
const str = "你好，世界！Hello!";
console.log(str.replace(/[，！!]/g, "")); // 输出：你好世界Hello方括号内的字符就是要过滤的目标，匹配到的都会被移除。
filter 写法：
const str = "你好，世界！Hello!";
const removeChars = ["，", "！", "!"];
const result = str
.split("")
.filter(ch => !removeChars.includes(ch))
.join("");
console.log(result); // 输出：你好世界Hello将要过滤的字符放在数组中，排除这些字符即可。
场景四：只保留字母和数字
正则表达式写法：
const str = "abc123!@#中文";
console.log(str.replace(/[^a-zA-Z0-9]/g, "")); // 输出：abc123[^a-zA-Z0-9] 表示匹配所有非字母和非数字的字符。
filter 写法：
const str = "abc123!@#中文";
const result = str
.split("")
.filter(ch => /^[a-zA-Z0-9]$/.test(ch))
.join("");
console.log(result); // 输出：abc123用正则表达式测试每个字符，只保留符合要求的。
三、两种方法对比
四、性能测试
const str = "abc123!@#中文 ".repeat(100000);
// 测试正则表达式
console.time("regex");
str.replace(/[^a-zA-Z0-9]/g, "");
console.timeEnd("regex");
// 测试 filter 方法
console.time("filter");
str.split("").filter(ch => /^[a-zA-Z0-9]$/.test(ch)).join("");
console.timeEnd("filter");实际测试中，正则表达式通常快 2-3 倍。在处理大量数据或高频操作时，这个差异会比较明显。
五、选择建议
正则表达式：适合规则固定、性能要求高的场景
filter 方法：适合逻辑复杂、需要动态调整的场景
六、实用技巧
用户输入处理：用正则表达式快速清理数据
function cleanInput(input) {
return input.replace(/[<>]/g, ""); // 移除可能引起安全问题的字符
}动态过滤：用 filter 方法根据条件过滤
function dynamicFilter(text, allowedChars) {
return text
.split("")
.filter(ch => allowedChars.includes(ch))
.join("");
}组合使用：可以先简单过滤，再用复杂逻辑
function processText(text) {
// 先用正则去空格
const noSpaces = text.replace(/\s/g, "");
// 再用 filter 做精细处理
return noSpaces
.split("")
.filter(ch => isValidChar(ch))
.join("");
}总结
正则表达式和 filter 方法各有优势。正则表达式写起来简洁，运行效率高。filter 方法逻辑清晰，容易理解和修改。
简单任务用正则表达式，复杂逻辑用 filter 方法。根据实际情况选择合适的方法，可以让代码既高效又易于维护。
在实际项目中，建议先明确需求：是需要高性能的简单过滤，还是需要灵活处理的复杂逻辑？然后选择最适合的方法。有时候，结合使用两种方法也能得到很好的效果。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
