js怎么实现筛选敏感词

创作时间:

作者:

@小白创作中心

js怎么实现筛选敏感词

引用

来源

https://docs.pingcode.com/baike/3589637

在Web开发中，敏感词过滤是一个常见的需求，特别是在社交平台、论坛等用户生成内容的场景中。本文将详细介绍如何使用JavaScript实现敏感词筛选，包括使用正则表达式进行匹配、动态更新敏感词库以及实时检测输入等方法。

JS 实现筛选敏感词的方法包括：使用正则表达式、创建敏感词库、动态更新敏感词库、实时检测输入。其中，使用正则表达式是最常见和高效的方法。正则表达式能够快速匹配文本中的敏感词，并且易于维护和扩展。下面将详细介绍如何使用正则表达式实现敏感词筛选。

一、正则表达式匹配

正则表达式在筛选敏感词中的应用非常广泛，主要是因为它的灵活性和高效性。通过构建一个包含所有敏感词的正则表达式，可以快速检测并替换文本中的敏感词。

1. 构建敏感词库

首先，我们需要定义一个敏感词库。这个库可以是一个数组，包含所有需要过滤的敏感词。

const sensitiveWords = ['敏感词1', '敏感词2', '敏感词3'];

2. 创建正则表达式

接下来，我们需要将敏感词库转换为一个正则表达式。可以使用
join
方法将数组中的敏感词拼接成一个字符串，并使用
|
作为分隔符。

const regex = new RegExp(sensitiveWords.join('|'), 'gi');

3. 检测和替换敏感词

使用正则表达式检测和替换敏感词。可以使用 JavaScript 的
replace
方法，将匹配到的敏感词替换为特定字符，如

function filterSensitiveWords(text) {  
    return text.replace(regex, (match) => '*'.repeat(match.length));  
}  
const text = "这是一个包含敏感词1的文本。";  
const filteredText = filterSensitiveWords(text);  
console.log(filteredText);  // 输出：这是一个包含的文本。

二、动态更新敏感词库

有时，我们需要动态更新敏感词库，例如从服务器获取最新的敏感词列表。可以通过异步请求获取敏感词库，并重新生成正则表达式。

1. 异步获取敏感词库

假设我们有一个 API 接口，可以返回最新的敏感词列表。我们可以使用
fetch
方法获取数据。

async function fetchSensitiveWords() {  
    const response = await fetch('https://api.example.com/sensitive-words');  
    const words = await response.json();  
    return words;  
}

2. 动态更新正则表达式

获取敏感词列表后，重新生成正则表达式，并用于检测和替换文本。

let regex;  

async function updateSensitiveWords() {  
    const sensitiveWords = await fetchSensitiveWords();  
    regex = new RegExp(sensitiveWords.join('|'), 'gi');  
}  
updateSensitiveWords();

三、实时检测输入

在某些应用场景中，我们需要实时检测用户输入的文本，并立即反馈。例如，在聊天应用中，用户输入敏感词时，需要即时提示或替换。

1. 绑定输入事件

可以通过监听输入框的
input
事件，实时检测用户输入的文本。

const input = document.getElementById('textInput');  

input.addEventListener('input', () => {  
    const filteredText = filterSensitiveWords(input.value);  
    input.value = filteredText;  
});