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

用正则表达式测试每个字符，只保留符合要求的。

三、两种方法对比

特点	正则表达式	filter 方法
写法	简洁，通常一行代码	步骤清晰，像操作数组
性能	较快（底层优化）	稍慢（需要拆分和重组）
适用场景	简单规则，高频使用	复杂逻辑，动态条件
可读性	需要懂正则语法	逻辑直观，易于理解

四、性能测试

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 方法。根据实际情况选择合适的方法，可以让代码既高效又易于维护。

在实际项目中，建议先明确需求：是需要高性能的简单过滤，还是需要灵活处理的复杂逻辑？然后选择最适合的方法。有时候，结合使用两种方法也能得到很好的效果。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12960