我如何将更新后的数组元素返回到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);

UPDATE

您的最终代码可以是：

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>