JSFiddle - React, Tailwind, and code Playground

HTML

<form name="badwords" method="post" action="" >
    <textarea name="comments" id="comments" rows="5" cols="50"></textarea>
    <br />
    <input id="formSub" type="submit" value="Submit!" />
    </form>

CSS

#button {
    padding:1em;
    border:1px solid black;
    width:100px;
}

JavaScript

var div = document.getElementById('formSub');

function replaceWords(event) {
    //Prevent form submission to server 
    event.preventDefault();
    var commentContent = document.getElementById('comments');
    console.log(commentContent.value);
    var badWords = ["crap", "ugly", "brat" ,"basterddouch"];
    console.log(commentContent.value);
    var censored = censore(commentContent.value, badWords);
    commentContent.value = censored;
}

function censore(string, filters) {
    // "i" is to ignore case and "g" for global
    var regex = new RegExp(filters.join("|"), "gi");
    console.log(regex);
    return string.replace(regex, function (match) {
        //replace each letter with a star
        var stars = '';
        for (var i = 0; i < match.length; i++) {
        	 return stars;
        stars += '*';
        
        }
        return stars;
    });

}
div.addEventListener('click',replaceWords);