Замена слов в строке на ****

initHTML(); 
setEventListeners(); 
 
function initHTML() { 
  document.body.insertAdjacentHTML("beforeend", 
   `<div id="wrapper"> 
      <p class="p"></p> 
      <input class="inp"> 
      <button class="add">Add</button> 
      <hr> 
      <textarea class="textarea"></textarea> 
      <hr> 
      <button class="censore">Censore</button> 
    </div>` 
  );  
  // Незачем усложнять себе жизнь. Одной строкой это сильно проще, а разницы особо нет. 
} 
 
function setEventListeners(){ 
  let keyWords = []; // Вообще полезно хранить данные в переменных, 
  // А HTML использовать только для их вывода. 
  let elem = new Elements(); 
   
  elem.add.addEventListener('click', function(){ 
    let word = elem.inp.value; 
    if( !word || keyWords.includes( keyWords ) ) return; 
     
    keyWords.push(word); 
    elem.p.textContent = keyWords.join(" "); 
  }); 
   
  elem.censore.addEventListener('click', function(){ 
    let reg = new RegExp( keyWords.join("|"), "ig" ); 
    elem.textarea.value = elem.textarea.value.replace(reg, function(match){ 
      return "*".repeat(match.length); 
    }); 
    // Функция внутри replace получает в качестве аргумента совпадение целиком. 
  }); 
   
  function Elements(){ 
    const root = document.getElementById('wrapper'); 
    const qs = str => root.querySelector(str); 
     
    return { 
      p: qs('.p'), 
      inp: qs('.inp'), 
      add: qs('.add'), 
      censore: qs('.textarea'), 
      textarea: qs('.textarea'), 
    }; 
  } 
}

String.prototype.repeat = function(times){ 
  var str = String(this); 
  for( var i = 0, s = ""; i < times; i++ ){ 
    s += str; 
  } 
  return s; 
} 
 
console.log( "Bubu_".repeat(5) );

window.onload = function() { 
  createWrapper();   
}; 
 
function createWrapper() { 
  const wrapper = document.createElement('div'); 
  wrapper.id = 'wrapper'; 
  document.body.append(wrapper);   
  wrapper.append(div(), input(), btnAdd(),  textarea(), cenzor()); 
  return wrapper; 
} 
 
function div () { // div for h1 and paragraph 
  const div = document.createElement('div'); 
  div.append(p()); 
  return div; 
} 
 
 
function p() { 
  const p = document.createElement('p'); 
  p.id = 'p';   
  return p; 
} 
 
function btnAdd () { 
  const btn = document.createElement('button'); 
  btn.innerHTML = 'Add'; 
  btn.id = 'add'; 
  btn.onclick = add; 
  return btn; 
} 
 
function input() { 
  const inp = document.createElement('input'); 
  inp.id = 'inp'; 
 
  return inp; 
} 
 
 
function textarea() { 
  const textarea = document.createElement('textarea'); 
  textarea.style.display = 'block'; 
  textarea.id = 'textarea'; 
  return textarea; 
} 
 
function cenzor() { // кнопка, при нажатии на которою, должно происходить изменение тексареа 
  const btn = document.createElement('button'); 
  btn.innerHTML = 'Cenzore'; 
  btn.onclick = cenzorCheck; 
  return btn; 
} 
 
function add () { // обработчиик, которая добавляет слова из инпута в строку 
  const inp = document.getElementById('inp'); 
  const p  = document.getElementById('p'); 
  if (inp.value) {   
  p.innerHTML += inp.value + ' '; 
  } 
} 
 
function cenzorCheck() { //обработчик, для изменения слов, 
  const p = document.getElementById('p'); 
  const textarea = document.getElementById('textarea') 
   
// Здесь была ошибка, вы перебирали textarea, и получали пустой массив 
  let match = textarea.value.split(' ').filter(elem =>     
    p.textContent.split(' ').includes(elem)); 
 
 
    // из-за пустого массива на предыдущем шаге здесь на выходе получали 1 звезду. 
    //тут укажите, как добавлять новые значения, просто заменять старые или добавлять к старым =+ 
    match.forEach((item)=> { 
      textarea.value = item.split("").map(()=>'*').join(""); 
    }) 
}