如何借助PurgoMalum结合纯JavaScript实现用户名敏感词过滤？

嘿，手动维护敏感词库确实是个吃力不讨好的活儿，用PurgoMalum这类第三方接口来做过滤绝对是更高效的选择！我给你整理了几种最优的实现方式，适配不同的场景：

一、现代浏览器推荐：使用Fetch API（Promise异步风格） #

Fetch是目前主流的异步请求API，语法简洁还支持Promise，非常适合处理这类HTTP接口调用。我们可以把用户输入的内容编码后传给接口，再处理返回的过滤结果：

// 封装成可复用的敏感词过滤函数
async function filterSensitiveWords(inputText) {
  try {
    // 对输入文本做URL编码，避免特殊字符破坏请求格式
    const encodedText = encodeURIComponent(inputText);
    // 调用PurgoMalum的JSON接口（返回格式更易处理，也可以用XML接口）
    const response = await fetch(`http://www.purgomalum.com/service/json?text=${encodedText}`);
    
    if (!response.ok) {
      throw new Error(`接口请求失败：${response.status}`);
    }
    
    // 解析JSON响应，提取过滤后的文本
    const resultData = await response.json();
    return resultData.result.trim();
  } catch (error) {
    console.error('敏感词过滤出错：', error);
    // 出错时返回原文本，避免阻塞业务流程
    return inputText;
  }
}

// 结合你的prompt获取用户名逻辑使用
async function getFilteredUsername() {
  const rawName = prompt("Please enter your name", "Harry Potter");
  if (rawName) {
    const filteredName = await filterSensitiveWords(rawName);
    console.log('过滤后的用户名：', filteredName);
    // 这里可以继续处理过滤后的用户名，比如存入本地或提交后端
  }
}

// 启动流程
getFilteredUsername();

如果你更习惯用XML接口，只需要把请求URL改成http://www.purgomalum.com/service/xml?text=${encodedText}，然后把解析逻辑换成const filteredText = await response.text();即可。

二、兼容老浏览器：使用XMLHttpRequest #

如果你的项目需要支持IE这类老旧浏览器，传统的XHR方式更稳妥：

// 封装过滤函数，用回调处理异步结果
function filterSensitiveWords(inputText, callback) {
  const encodedText = encodeURIComponent(inputText);
  const xhr = new XMLHttpRequest();
  
  xhr.open('GET', `http://www.purgomalum.com/service/json?text=${encodedText}`, true);
  
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      const resultData = JSON.parse(xhr.responseText);
      callback(null, resultData.result.trim());
    } else {
      callback(new Error(`请求失败：${xhr.status}`), inputText);
    }
  };
  
  xhr.onerror = function() {
    callback(new Error('网络请求异常'), inputText);
  };
  
  xhr.send();
}

// 结合prompt使用
const rawName = prompt("Please enter your name", "Harry Potter");
if (rawName) {
  filterSensitiveWords(rawName, function(error, filteredName) {
    if (error) {
      console.error('过滤出错：', error);
    }
    console.log('过滤后的用户名：', filteredName);
  });
}

三、几个关键优化建议 #

• 必须做URL编码：用encodeURIComponent处理用户输入，避免空格、特殊字符导致请求URL无效。
• 错误处理不能少：接口可能因为网络或服务故障失败，一定要添加容错逻辑，比如返回原文本或提示用户重新输入。
• 适配HTTPS环境：如果你的网站是HTTPS协议，记得把接口URL改成https开头，避免浏览器的混合内容报错。
• 实时场景加防抖：如果是用户实时输入的场景（比如注册输入框），可以给输入事件加防抖，避免频繁调用接口浪费资源。

内容的提问来源于stack exchange，提问作者Tom