React Native中的脏话过滤器

在这篇文章中，我们将看到一个有趣的库，它可以帮助您在 React Native 中创建一个亵渎过滤器 – 删除坏词。我正在使用一款聊天应用程序，要求是与人们建立干净的社交联系，这里的“干净”一词意味着任何人都不应使用任何攻击性语言或任何词语。作为开发人员，您只能指导用户，但无法阻止他们在聊天中使用此类词语，因此我借助了亵渎过滤器。

脏话过滤器可以帮助您删除坏词，它从句子中捕获坏词并用占位符替换它们。如果您正在创建任何社交媒体应用程序/聊天或任何用户可以与他人分享内容的内容，那么您可以使用脏话过滤器来清除脏话。

在 React Native 中创建脏话过滤器非常简单，你只需要使用 bad-words 库，它直接提供了一个干净的函数。

如何过滤脏话

要过滤坏词，您只需要导入依赖项并创建一个对象筛选。导入过滤器后，您可以使用 clean 功能来过滤坏词。

import Filter from 'bad-words';
const filter = new Filter();
filter.clean(inputValue)

占位符覆盖

如果您想使用自己的占位符，则可以在初始化 Filter 时使用占位符。

const Filter = require('bad-words');
let customFilter = new Filter({ placeHolder: 'x'});
customFilter.clean("Don't be an ash0le"); //Don't be an xxxxxx

将单词添加到黑名单

要将单词添加到黑名单，您可以传递多个单词 添加单词 功能。如果您想使用数组，请使用扩展运算符。

const filter = new Filter(); 

filter.addWords('bad1', 'bad2', 'bad3');
filter.clean("hello bad1 bad2 bad3!")
//hello **** **** ****!

//or use an array using the spread operator

let newBadWords = ('bad1', 'bad2', 'bad3');
filter.addWords(...newBadWords);
filter.clean("hello bad1 bad2 bad3!")
//hello **** **** ****!

//or

const filter = new Filter({ list: ('bad1', 'bad2', 'bad3') }); 
filter.clean("hello bad1 bad2 bad3!")
//hello **** **** ****!

使用空列表实例化

您可以清理完整列表并可以从初始开始

const filter = new Filter({ emptyList: true }); 
filter.clean("hell this wont clean anything");
//hell this wont clean anything

从黑名单中删除单词

要从黑名单中删除任何单词，您可以使用 删除单词 功能。

const filter = new Filter(); 

filter.removeWords('bad1', 'bad2', 'bad3');
filter.clean("hello bad1 bad2 bad3!");
//hello bad1 bad2 bad3!

//or use an array using the spread operator

let removeWords = ('bad1', 'bad2', 'bad3');
filter.removeWords(...removeWords);
filter.clean("hello bad1 bad2 bad3!");
//hello bad1 bad2 bad3!

脏话过滤器示例说明

在此示例中，我们将创建一个简单的输入，允许用户输入一些句子，这些句子将使用脏话过滤器进行过滤，如果我们的过滤器在句子中发现任何坏词，那么它将用 * 替换它（您也可以自定义* 随心所欲）。

让我们从一个例子开始。

制作 React Native 应用程序

React Native 入门将帮助您更多地了解如何制作 React Native 项目。我们将使用 React Native 命令行界面来制作我们的 React Native 应用程序。

如果您之前安装了全局的react-native-cli软件包，请将其删除，因为它可能会导致意外问题：

npm uninstall -g react-native-cli @react-native-community/cli

运行以下命令创建一个新的 React Native 项目

npx react-native init ProjectName

如果你想使用特定的 React Native 版本启动一个新项目，你可以使用 –version 参数：

npx react-native init ProjectName --version X.XX.X

注意如果上述命令失败，您可能使用的是旧版本 react-native 或者 react-native-cli 在您的电脑上全局安装。尝试卸载 cli 并使用 npx 运行 cli。

这将在项目目录中创建一个带有名为 App.js 的索引文件的项目结构。

安装依赖项

使用 Filter 你需要安装 bad-words 依赖项并为此打开终端并使用跳转到项目

cd ProjectName

运行以下命令

npm install --save bad-words

此命令会将所有依赖项复制到您的 node_module 目录中。 –save 是可选的，它只是更新 package.json 文件中的依赖项。

在 React Native 中制作脏话过滤器的代码

在任何代码编辑器中打开 App.js 并将代码替换为以下代码

应用程序.js

// Profinity Filter in React Native - To Remove bad words
// https://aboutreact.com/react-native-profanity-filter/

// Import React
import React, {useState} from 'react';

// Import all the required components
import {
  TextInput,
  SafeAreaView,
  View,
  StyleSheet,
  Text
} from 'react-native';

// Import profanity filter
import Filter from 'bad-words';

const App = () => {
  let (inputValue, setInputValue) = useState('');

  const filter = new Filter();

  const handleInput = (value) => {
    setInputValue(value);
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Text style={styles.heading}>
          Profinity Filter in React Native
          {'\n'}
          To Remove Bad Words
        </Text>
        <Text style={styles.insertedTextStyle}>
          {inputValue ? filter.clean(inputValue) : ''}
        </Text>
        <TextInput
          value={inputValue}
          onChangeText={handleInput}
          placeholder={'Pleas Enter any Value'}
          style={styles.inputStyle}
        />
        <Text style={styles.textStyle}>
          Please insert any string with bad word in input {' '}
          and you will see it filtered out
        </Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#ffffff',
    padding: 16,
  },
  heading: {
    fontSize: 22,
    textAlign: 'center',
    marginBottom: 16,
    marginTop: 150,
  },
  textStyle: {
    marginVertical: 10,
    textAlign: 'center',
  },
  insertedTextStyle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginVertical: 20,
    textAlign: 'center',
  },
  inputStyle: {
    width: '100%',
    height: 44,
    padding: 10,
    marginBottom: 10,
    backgroundColor: '#ecf0f1',
  },
});

export default App;

运行 React Native 应用程序

再次打开终端并使用跳转到您的项目。

cd ProjectName

1. 启动 Metro Bundler

首先，您需要启动 Metro，React Native 附带的 JavaScript 捆绑器。要启动 Metro 捆绑程序，请运行以下命令

npx react-native start

一旦您启动 Metro Bundler，它将永远在您的终端上运行，直到您将其关闭。让 Metro Bundler 在自己的终端中运行。打开一个新终端并运行该应用程序。

2.启动React Native应用程序

在 Android 虚拟设备或真实调试设备上运行项目

npx react-native run-android

或在 iOS 模拟器上运行（仅限 macOS）

npx react-native run-ios

输出截图

在线模拟器中的输出

这就是如何在 React Native 中制作脏话过滤器 – 删除脏话。如果您有任何疑问或想分享有关该主题的内容，您可以在下面发表评论或在此处联系我们。很快就会有更多帖子发布。

React Native中的脏话过滤器