Skip to content

naufal-yafi/misoh

Repository files navigation

totalDownloads size contributor

Misoh

This is simple JavaScript logic to censor certain words in certain text using Regular Expressions (RegEx). The logic allows you to specify the word you want to censor and the replacement word for it.

Download Latest Version

Live Demo

Table of Contents

1. Why I Make this Repo?

I hope this repo is useful, both for you and for my next project, like a chat app that can be used to censor profanities from users. And also with me creating this project I learned to use RegEx.

To make this project I used several technologies, such as

Tech I Use To
Typescript Create logic censored bad words
RegEx TS Filter and replace word
Babel TS Convert code to compatible all browser version
Jest TS Unit testing
RollupJS Bundling and minify javascript code
Vite + ReactJS To create an example application that is a simple chat app

[Back to Table of Contents]

2. Installation Tool

2.1 Instant Download

You can see all the versions of the release notes that you want to download. Or you can download the latest version.

2.2 Requirement

If you want to do a manual installation, there are several things that must be prepared.

2.3 Manual Installation

Even though the manual steps are quite complicated, there are benefits that you can get. You can see how the system works to process raw data into build results and can be used.

1) Download this repo
git clone https://github.com/naufal-yafi/misoh.git
2) Go to /misoh folder and download all dependencies
cd misoh && npm i
3) Build and Minify code
npm run prod
4) Result

You can use the output file from /dist/bundle&minify/misoh-[date]-[time].bundle.minify.js

misoh
├── build               # the compile results from the ts file to js
│   ├── datas.js          
│   ├── estimated.js    
│   ├── main.js    
│   └── remove    
│
├── dist                # result file can you use    
│   └── bundle&minify
│       └── misoh-[date]-[time].bundle.minify.js     
│
├── example             # result file can run example app
│   └── src
│       └── tools
│           └── misoh-[date]-[time].bundle.minify.js 
│
└── ...

[Back to Table of Contents]

3. How to Use this Tool?

import misoh from "./misoh-[date]-[time].bundle.minify.js"

const result = misoh("fuck");
console.log(result);

// Output
// fu**

[Back to Table of Contents]

4. Feature Tool?

For the time being misoh can only censor bad words.

Example

fuck => fu**
bitch => b****.

[Back to Table of Contents]

5. How the System Works?

misoh
├── build                             # result compile from /src/*.ts
│   ├── datas.js          
│   ├── estimated.js    
│   ├── main.js    
│   └── remove.js
│
├── dist
│   ├── bundle    
│   │   └── misoh-[date]-[time].bundle.js           # result bundling js code
│   │
│   └── bundle&minify
│       └── misoh-[date]-[time].bundle.minify.js    # result bundling and minify js code
│
├── example                          # react project / example app
│
├── ...
│
├── src                              # the folder that holds the raw code
│   ├── check.ts                     # the file used for testing whether the bad word is not in badWordList datas.ts 
│   ├── datas.ts                     # file that holds all the bad words
│   ├── estimated.ts                 # a file that specifies how many letters to censor with the * symbol
│   ├── main.ts                      # file yang menjalankan fungsi dari file - file lain dan melakukan seleksi kata buruk
│   └── remove.ts                    # file that specifies how many letters will not be censored with the * symbol
│
├── test                             
│   ├── checkAvailableWord.test.ts   # to know the bad word does not yet exist     
│   ├── main.test.ts                 # to find out if the word sensor is working properly
│   └── sumData.test.ts              # to know how many bad words
│
├── ...
│
├── babel.config.json                # configuration ts babel
│
├── jest.config.mjs                  # configuration running unit testing
│
├── ...
│
├── package.json                     # manage dependencies and dev command
│
├── rollup.config.dev.js             # configuration bundling js code
│
├── rollup.config.prod.js            # configuration bundling and minify js code
│
└── tsconfig.json                    # configuration compile ts to js

[Back to Table of Contents]

6. Development Commands

6.1 Usage

npm run [command]

6.2 Example

npm run start

6.3 Available Commands

You can see all available command on file package.json.

Command Explanation
start Run example app
test Run all test code
sum See total bad word
dev Build bundle only
prod Build bundle&minify
clear Remove result build
setup Downloads everything the example app needs
check See available file misoh on example app

[Back to Table of Contents]

7. Installation Example App

7.1 Download all dependencies

npm run setup

7.2 Checks if misoh-[date]-[time].bundle.minify.js is available

npm run check

If the output is like this you can directly run the apk with npm start

> misoh@1.0.0 check
> cd ./example/src/function && node getFile.js && cd .. && cd .. && cd ..

Available Files:  [
  'misoh-20230801-1035.bundle.minify.js',
  'misoh-20230801-1112.bundle.minify.js'
]

[✓] Choose file misoh-20230801-1112.bundle.minify.js
[✓] Update success ./example/src/function/inputRule.js

If the output message is "Not Available File" type npm run prod and type the command npm run check again.

> misoh@1.0.0 check
> cd ./example/src/function && node getFile.js && cd .. && cd .. && cd ..


[✕] Not Available File
Type: npm run prod

7.3 Running example app

npm start

[Back to Table of Contents]

8. Feature Example App

8.1 Clear all chat

clear

8.2 Mark @gmail, number, symbol and badword

mark feature

8.3 Error empty message

image

8.4 Error not allowed message

Example if you type <script></script>.

image

[Back to Table of Contents]

9. How do I Contribute?

9.1 Adding Bad Word

If you want to contribute in adding bad words. You can add it in /src/datas.ts file.

const badWordList: ReadonlyArray<String> = [
    ...
    ...
    "zipperheads",
    "zoophile",
    "zoophilia",
    "🖕",
    "shit",
    "type your bad word here"
];

export default badWordList;

[ !!! ] But before that, first check the word you want to add whether it already exists or not by testing it in the /test/checkAvailableWord.test.ts file. [ !!! ]

9.2 Validate Your New Bad Word

// ./test/checkAvailableWord.test.ts

test(`Test ${number++}`, () => {
    expect(
        checkWord('fuck')
    ).toBe(false);
});

9.3 Running Unit Testing

npm run test

9.4 Result Unit Testing

If the result fails as below. Then the bad word is already there, try to find another bad word.

 FAIL  test/checkAvailableWord.test.ts
  × Test 0 (5 ms)
                                                            
  ● Test 0                                                  
                                                            
    expect(received).toBe(expected) // Object.is equality   

    Expected: false
    Received: true

       6 |     expect(
       7 |         checkWord('fuck')
    >  8 |     ).toBe(false);
         |       ^
       9 | });
      10 |

9.5 See Total Bad Words

npm run sum

Output:

console.log
    [Total Data]: 2861

[Back to Table of Contents]

01/08/2023