Last updated on May 7th, 2025 at 07:49 am
Incorporating a profanity (bad words) filter into your web forms is essential for maintaining a respectful and user-friendly environment. Ensuring that user-generated content on your website remains appropriate is crucial. One effective method is to implement a client-side filter that detects and prevents the submission of messages containing offensive language.
Why Implement a JavaScript Profanity Filter?
User-generated content can sometimes include offensive language, which may not align with your website’s standards or community guidelines. By implementing a JavaScript-based profanity filter, you can:
- Maintain the integrity and professionalism of your platform.
- Prevent the submission of offensive content.
- Enhance user experience by promoting respectful communication.
Step-by-Step Guide to Creating a Profanity Filter
The core idea is to compare user input against a predefined list of prohibited words. If any matches are found, the submission is halted, and the user is prompted to revise their message.
1. Define a List of Prohibited Words
Start by creating an array that contains words you want to filter
var bad_words_array = ["xxx", "badword-2", "badword-3"];2. Create a Function to Detect Bad Words
Develop a function that checks user input against the list of prohibited words: This function checks if the input text contains any of the specified bad words. If a match is found, it returns true; otherwise, it returns false. Add this function to a file named badword.js
var bad_words_array = ["xxx", "badword-2", "badword-3"];
function badwords(txt) {
for (var i = 0; i < bad_words_array.length; i++) {
if (txt.indexOf(bad_words_array[i]) > -1) {
return true;
}
}
return false;
}
3. Integrate the Filter with Your HTML Form
Use the following HTML and JavaScript to incorporate the filter into your form:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="badwords.js"></script>
<script type="text/javascript">
function validateMessage() {
var textbox_val = document.form.textbox.value;
if (textbox_val === "") {
alert("Please enter a message.");
return false;
}
if (badwords(textbox_val)) {
alert("Your message contains inappropriate words. Please remove them.");
document.form.textbox.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form action="check.php" method="post" onsubmit="return validateMessage();" name="form">
<textarea name="textbox"></textarea>
<input type="submit" value="Submit" />
</form>
</body>
</html>Enhancing the Profanity Filter
For a more robust solution, consider the following enhancements:
- Regular Expressions: Utilize regex to detect variations and obfuscated forms of bad words.
- External Libraries: Implement libraries like bad-words for comprehensive filtering capabilities.
- Customizable Placeholder: Replace detected bad words with customizable placeholders to maintain message readability.
This simple client-side solution helps in maintaining the quality of user-submitted content by filtering out unwanted language. However, for more robust protection, especially against users who might disable JavaScript, consider implementing server-side validation as well.
the code not working
Hello Lucy,
Thanks for bringing this up, The issue has been fixed. Code is working fine now.