Как вернуть мои обновленные элементы массива в DOM?

Question

Я все еще работаю над фильтром слов. Я пробовал разные вещи, но я всегда зацикливаюсь на том, чтобы помещать мои обновленные слова обратно в DOM. Цель состоит в том, чтобы собрать все плохие слова, заменить их строкой (например, ****) и вывести ее вместо исходного термина. Например, с текстом «это текст с плохим словом», который превратился бы в «это текст с **** словом». У меня есть массив плохих слов, хранящихся и объявленных как badStuff.

Сначала я получаю все inputs type = text и превращаю эту коллекцию HTML в массив. То же самое с textareas. Затем я объединяю эти массивы в submittedWords.

. Я использую функцию, которая сравнивает и заменяет слова следующим образом:

function validateText() {

  // get the values from all input fields
  for (let i = 0; i < inputs.length; i++) {
    submittedWords.push(inputs[i].value);
  }

  // add the values from all textareas
  for (let i = 0; i < textareas.length; i++) {
    submittedWords.push(textareas[i].value);
  }

  // loop through the submitted words and if one matches an item in badStuff,
  // replace the original term with a censored version
  for ( let i = 0; i < submittedWords.length; i++) {
    if (badStuff.includes(submittedWords[i].toLowerCase())) {
      submittedWords[i] = submittedWords[i].replace(submittedWords[i], "****");
      //return submittedWords[i] into DOM
      // return? print?
    }
  }

  // clear submittedWords array after each check
  submittedWords = [];
}

validateText();

Теперь моя проблема в том, что я не уверен, как выводитьмои результаты в DOM, так что каждое плохое слово заменяется на **** каждый раз, когда validateText() запускается и встречает его. Я знаю, как заменить текст в, скажем, некоторых <p> или других тегах или обменять / обновить классы CSS через JS для отображения результатов. Но здесь у меня есть массив с элементами из различных полей ввода и текстовых областей, которые необходимо заменить.

Может быть, я не вижу очевидного.

Answer 1

Вам не нужно хранить все в массиве, а затем выполнить цикл дважды. При этом вы передадите управление элементу DOM.

Сократите код до:

for (let i = 0; i < inputs.length; i++) {
    if (badStuff.includes(inputs[i].value.toLowerCase())) {
      inputs[i].value = inputs[i].value.replace(inputs[i].value, "****");
    }
}


for (let i = 0; i < textareas.length; i++) {
   if (badStuff.includes(textareas[i].value.toLowerCase())) {
      textareas[i].value = textareas[i].value.replace(textareas[i].value, "****");
   }
}

С другой стороны

inputи в полях textarea может быть много слов, находящихся в массиве badStuff, поэтому badStuff.includes(full_value) вам будет недостаточно, вместо этого ваш подход должен быть

var badStuff = ["bad1", "bad2", "bad3"];
var str = "hello bad1, how bad2"
badStuff.some(v => {
    if (str.includes(v)) {
      str = str.replace(v, "****")
    }
})
console.log(str);

ОБНОВЛЕНИЕ

Окончательный код для вас может быть:

for (let i = 0; i < inputs.length; i++) {
    badStuff.some(v => {
        if (inputs[i].value.toLowerCase().includes(v)) {
          inputs[i].value = inputs[i].value.replace(v, "****")
        }
    })
}


for (let i = 0; i < textareas.length; i++) {
    badStuff.some(v => {
        if (textareas[i].value.toLowerCase().includes(v)) {
          textareas[i].value = textareas[i].value.replace(v, "****")
        }
    })
}

Answer 2

Пока ваш элемент является полем формы, вы должны помещать элементы вместо их значения в массив, а в цикле for обновлять их свойство value, если это необходимо. Вот пример:

const badStuff = [
  'censure',
  'blacklist',
  'reprehend'
];

let submittedWords = [];

function validateText() {
  const inputs = document.querySelectorAll('input');
  // get all the input fields
  for (let i = 0; i < inputs.length; i++) {
    submittedWords.push(inputs[i]);
  }
  const textareas = document.querySelectorAll('textarea');
  // add all the textareas
  for (let i = 0; i < textareas.length; i++) {
    submittedWords.push(textareas[i]);
  }

  // loop through the form field elements and if their value matches an item in badStuff, replace the original value with a censored version
  for (let i = 0; i < submittedWords.length; i++) {
    const element = submittedWords[i];
    if (badStuff.includes(element.value.toLowerCase())) {
      element.value = element.value.replace(element.value, "****");
    }
  }

  // clear submittedWords array after each check
  submittedWords = [];
}

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  submittedWords = [];
  validateText();
})

<form>
  <input name="test" type="text" value="" />
  <textarea type="text" value=""></textarea>
  <input type="submit" value="submit" />
</form>