如何将更新后的数组元素返回到 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++) {&nbsp; &nbsp; if (badStuff.includes(inputs[i].value.toLowerCase())) {&nbsp; &nbsp; &nbsp; inputs[i].value = inputs[i].value.replace(inputs[i].value, "****");&nbsp; &nbsp; }}for (let i = 0; i < textareas.length; i++) {&nbsp; &nbsp;if (badStuff.includes(textareas[i].value.toLowerCase())) {&nbsp; &nbsp; &nbsp; textareas[i].value = textareas[i].value.replace(textareas[i].value, "****");&nbsp; &nbsp;}}另一方面input和textarea字段可能有很多单词在 badStuff 数组中，所以 badStuff.includes(full_value)对你来说还不够，你的方法应该是var badStuff = ["bad1", "bad2", "bad3"];var str = "hello bad1, how bad2"badStuff.some(v => {&nbsp; &nbsp; if (str.includes(v)) {&nbsp; &nbsp; &nbsp; str = str.replace(v, "****")&nbsp; &nbsp; }})console.log(str);更新您的最终代码可以是：for (let i = 0; i < inputs.length; i++) {&nbsp; &nbsp; badStuff.some(v => {&nbsp; &nbsp; &nbsp; &nbsp; if (inputs[i].value.toLowerCase().includes(v)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputs[i].value = inputs[i].value.replace(v, "****")&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })}for (let i = 0; i < textareas.length; i++) {&nbsp; &nbsp; badStuff.some(v => {&nbsp; &nbsp; &nbsp; &nbsp; if (textareas[i].value.toLowerCase().includes(v)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; textareas[i].value = textareas[i].value.replace(v, "****")&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })}

Answer 2

只要您的元素是表单字段，您就应该将元素而不是它们的值推送到数组中，并且在您的 for 循环中，value如果需要，更新它们的属性。下面是一个例子：const badStuff = [&nbsp; 'censure',&nbsp; 'blacklist',&nbsp; 'reprehend'];let submittedWords = [];function validateText() {&nbsp; const inputs = document.querySelectorAll('input');&nbsp; // get all the input fields&nbsp; for (let i = 0; i < inputs.length; i++) {&nbsp; &nbsp; submittedWords.push(inputs[i]);&nbsp; }&nbsp; const textareas = document.querySelectorAll('textarea');&nbsp; // add all the textareas&nbsp; for (let i = 0; i < textareas.length; i++) {&nbsp; &nbsp; submittedWords.push(textareas[i]);&nbsp; }&nbsp; // loop through the form field elements and if their value matches an item in badStuff, replace the original value with a censored version&nbsp; for (let i = 0; i < submittedWords.length; i++) {&nbsp; &nbsp; const element = submittedWords[i];&nbsp; &nbsp; if (badStuff.includes(element.value.toLowerCase())) {&nbsp; &nbsp; &nbsp; element.value = element.value.replace(element.value, "****");&nbsp; &nbsp; }&nbsp; }&nbsp; // clear submittedWords array after each check&nbsp; submittedWords = [];}document.querySelector('form').addEventListener('submit', function(e) {&nbsp; e.preventDefault();&nbsp; submittedWords = [];&nbsp; validateText();})<form>&nbsp; <input name="test" type="text" value="" />&nbsp; <textarea type="text" value=""></textarea>&nbsp; <input type="submit" value="submit" /></form>