Post
Ask Question

Block Specific Bad Words Using JavaScript jQuery

Introduction

 
In this tutorial, I am going to explain how to block specific (bad) words using JavaScript/jQuery.
 
Now, we will see the implementation of how to block specific (bad) words using JavaScript/jQuery. In a web-based application where we have some anonymous forms, users may type unwanted words in the free text. So in this tutorial, I will explain to you how to restrict specific words in the free text.
 
First, create an HTML page.
 
In that page add a free text textbox and a button. On button click call a Javascript function which I defined in the script fnCheckForRestrictedWords(). Within this function, I have added a string array of words which I would like to block in the text box. So while clicking on the button it will pass the textbox value to the function and check any restricted words in the array isexists in the text box. If it exists then it will throw an error message saying that “You have entered some restricted words”. Otherwise it won’t throw any error.
 
Below is the html and script used for demo purposes.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Block Specific(Bad) Words Using JavaScript/jQuery</title>  
  6. </head>  
  7. <body>  
  8.     <div id="wrapper" style="width:600px; margin:0 auto;">  
  9.         <h2>Block Spcific(Bad) Words Using JavaScript/jQuery</h2>  
  10.         <input id="txtWords" placeholder="Type some words here like 'kill,fight,slap" style="width:300px;" />  
  11.         <br />  
  12.         <br />  
  13.         <label>Restricted Words: kill,fight,slap</label>  
  14.         <br />  
  15.         <br />  
  16.         <input type="button" id="btnCheck" onclick="fnCheckForRestrictedWords();" value="Check For Restricted Words">  
  17.     </div>  
  18.     <script type="text/javascript">  
  19.         function fnCheckForRestrictedWords() {  
  20.             var restrictedWords = new Array("kill", "fight", "slap");  
  21.             var txtInput = document.getElementById("txtWords").value;  
  22.             var error = 0;  
  23.             for (var i = 0; i < restrictedWords.length; i++) {  
  24.                 var val = restrictedWords[i];  
  25.                 if ((txtInput.toLowerCase()).indexOf(val.toString()) > -1) {  
  26.                     error = error + 1;  
  27.                 }  
  28.             }  
  29.   
  30.             if (error > 0) {  
  31.                 alert('You have entered some restricted words.')  
  32.             }  
  33.             else {  
  34.                 // Your logic here  
  35.             }  
  36.         }  
  37.     </script>  
  38.   
  39.     <!--<div style="width:151px;height:189px;background-color:greenyellow;color:red;text-align:center;font-size:x-large;" >  
  40.         For Website Development, Digital Marketing, SEO & Email Setup Contact <b>6380 392 293</b>  
  41.     </div>-->  
  42. </body>  
  43. </html>  
Output
 
Now, if you run the program you can see the output of how to block specific (bad) words using JavaScript/jQuery.
 
Output
 

Conclusion

 
I hope you learned how to block specific (bad) words using JavaScript/jQuery. Do you like this tutorial? Help us to improve. Please post your comments and feedback below.