如何将更新后的数组元素返回到 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>通过 JS替换某些或其他标签中的文本或交换/更新 CSS 类以显示结果。但是在这里，我有一个数组，其中包含需要替换的各种输入字段和文本区域的元素。也许我看不到明显的。

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>