Алгоритм цензурирования

Question

В javascript у меня есть массив со словами, которые я хотел бы подвергнуть цензуре после помещения некоторого текста в textarea, и когда слово в нем совпадает с одним в массиве, оно заменяется на «****».Проблема в том, что, например, запрещенное слово - «word1», а когда я запускаю событие, нажимая на кнопку «censor», textarea.value, которая (например) - «word1!»заменяется на «*****», но я хочу, чтобы оно было «*****!».

Нет циклов, потому что я просто попытался применить алгоритм для одного забаненного слова,Даже не мог этого сделать.Переменная 'start' предназначена для дальнейшего поиска других запрещенных слов в пределах textarea.value.Все должно быть сделано с помощью базовых методов строки / массива, без использования регулярных выражений.

let getId = x => document.getElementById(x);
let banned = ['word1','word2','word3'];
let start = 0;

getId('censor').addEventListener('click', function(){
let stars = '';
for(let i=0;i < banned[0].length; i++) {
    stars+= '*';
}
let str = getId('text').value;
str = str.split(' ');
let found = str.indexOf(banned[0],start);
str.splice(found,1, stars);
str = str.join(' ');
getId('text').value = str;
})

<div class="container">
    <form action="">
        <input type="text" id="banInput">
        <input type="button" value="Add word" id="add">
    </form>
    <textarea name="" id="text"></textarea>
    <input type="button" value="censor" id="censor">
</div>

Answer 1

let getId = x => document.getElementById(x);
let banned = ['word1', 'word2', 'word3'];

getId('add').addEventListener('click', function() {
  banned.push(getId('banInput').value)
  getId('banInput').value = ''
  console.log(banned)
})

getId('censor').addEventListener('click', function() {

  let str = getId('text').value;
  let arr = str.split(/\b/) // array of words
  let censored = arr.map(word => banned.includes(word) ? //if word is in banned
    '*'.repeat(word.length) // replace with *
    :
    word) // leave as is

  getId('text').value = censored.join(''); // back to string
})

<div class="container">
  <form action="">
    <input type="text" id="banInput">
    <input type="button" value="Add word" id="add">
  </form>
  <textarea name="" id="text"></textarea>
  <input type="button" value="censor" id="censor">
</div>

Answer 2

Самым простым решением было бы использование регулярного выражения для фильтрации каждого слова по списку цензурированных слов.

Ниже я делаю это внутри оператора String.replace , чтобы упроститьпроцесс.

//Censor function
var censored = [];
function censor(input) {
    return input.replace(/\w+/igm, function (word) {
        if (censored.some(function (cWord) { return cWord.toLowerCase() === word.toLowerCase(); })) {
            return word.replace(/./igm, '*');
        }
        return word;
    });
}
// HTML NODES
var inputField = document.body.appendChild(document.createElement("textarea"));
var outputField = document.body.appendChild(document.createElement("textarea"));
outputField.readOnly = true;
document.body.appendChild(document.createElement("br"));
var listInput = document.body.appendChild(document.createElement("input"));
listInput.title = listInput.placeholder = "insert censored words, seperate by \" \"";
listInput.value = '';
//Update functions
function updateOutput() {
    outputField.value = censor(inputField.value);
}
function updateCensorList() {
    censored = listInput.value.split(" ");
    if (censored == null) {
        censored = [''];
    }
    else {
        censored = censored.map(function (a) { return a.trim(); });
    }
    updateOutput();
}
//Bind events
listInput.addEventListener("change", updateCensorList);
listInput.addEventListener("keyup", updateCensorList);
inputField.addEventListener("change", updateOutput);
inputField.addEventListener("keyup", updateOutput);