CODEWITHSUNDEEP
javascript
Kainé
Kainé

Reputation: 19

JavaScript avoid bad words in textarea by using an alert box?

I have to make a script which can check my textarea if there are any bad words in there. Once the users leaves the textarea their should be alert box appearing. After that the inputted text in the area should be deleted.

I need JavaScript solutions (no jQuery please).

<!DOCTYPE html>
    <html>
        <head>
            <title>RIC</title>
        </head>

        <body>
            <textarea name="ric" id="textarea">
            </textarea>

            <script>

                my_textarea = document.getElementById('textarea');

                if (/\b(?=\w)(asshole|fucking)\b(?!\w)/i.test(my_textarea.value)) {
                    alert("Hey no bad words here!");
                } else {
                    // Okay move on!
                }

            </script>

        </body>
</html>

Upvotes: 3

Views: 2034

Answers (4)

Hameed Syed
Hameed Syed

Reputation: 4275

Here goes my code,Please do populate the badword array with your bad words and this code must oppose bad words ,it will.!!!

        <div>
            <textarea name="ric" id="txtArea" onkeyup="badWordChecker()" onblur="nothingTyped()"> </textarea>
        </div>
        <script>
            function nothingTyped() {
                var badWordTextBoxLength = document.getElementById('txtArea').value.length;

                if (badWordTextBoxLength == 0) {
                    alert("YOu cannot leave easily!!!Please type something ");
                    document.getElementById('txtArea').focus();
                    return false;
                }
            }
            function badWordChecker() {
                //create an array of bad words
                var badwords = ["f***", "a****", "f***"];
                var badWordTextBox = document.getElementById('txtArea');
                var badWordTextBoxValue = badWordTextBox.innerText;
                var backgroundcolor = "white";

                function isTheWordBad(value, index, array) {
                    if (value == badWordTextBoxValue) {
                        alert("hey!No badwords");
                        badWordTextBox.textContent = "";
                        return true;
                    }
                    else {                    
                        return false;
                    }

                }
                var result = badwords.filter(isTheWordBad);
            }
        </script>
</body>

Upvotes: 0

Gadget
Gadget

Reputation: 403

This code should work. It will also censor the words by replacing them with a group of asterisk characters.

<!DOCTYPE html>
<html>
  <head>
    <title>RIC</title>
  </head>
  
  <body>
    <textarea name="ric" id="textarea" onblur="checkWords()"></textarea>
    
    <script>
      function checkWords() {
        var my_textarea = document.getElementById('textarea').value;
        var pattern = /fox|dog/ig;
        
        if (my_textarea.match(pattern)) {
          alert("Hey no bad words here!");
          my_textarea = my_textarea.replace(pattern, "****" );
          document.getElementById('textarea').value = my_textarea;
        }
        
      }
    </script>
    
  </body>
</html>

Upvotes: 1

ThomasS
ThomasS

Reputation: 715

The reason your function does not get called (well it does get called, once at page load) is because there is no event handler to check when the user leaves the text area. You can either use onChange or onBlur they both trigger when the user leaves but onChange will only trigger when the content has actually been changed.

Try changing your code to this:

        <textarea name="ric" id="textarea" onBlur="check()">


        </textarea>

                <script>
                var check = function(){
                my_textarea = document.getElementById('textarea');

                    if (/\b(?=\w)(asshole|fucking)\b(?!\w)/i.test(my_textarea.value)) {
                        alert("Hey no bad words here!");
                        my_textarea.value = "";
                    } else {
                        // Okay move on!
                    }}
                </script>

As for the checking on bad words, as stated by others you can loop an array of 'bad words' with <text>.indexOf(<bad word>) and check if the index is found or not. There might be a 'nicer' way using regex but can't help with that

Upvotes: 0

GMchris
GMchris

Reputation: 5648

Here's what you can do. First create a function which will check for invalid words and clear the textarea:

function filterTextarea() {
  var textarea = document.getElementById('textarea');
  var matches = textarea.value.match(<THE REGEX FOR THE WORDS YOU WANT TO FILTER>);

  if (matches) {
    alert('Hey, no bad words!');
    textarea.value = '';
    return;
  }

  // Other stuff.
}

Then attach an event listener to the textarea, which will check it every time a key is pressed and pass your function as a callback.

document.getElementById('textarea').addEventListener('keyup', filterTextarea, false);

Upvotes: 4

Related Questions