удаление слова из строки массива методами .split () и .filter ()

Question

Я пытаюсь создать небольшое приложение, которое позволяет пользователю вводить строку в массив, разбивать строку на отдельные элементы массива, а затем (в отдельном поле) вводить определенное слово из строки, которую нужно отфильтровать,Текущая настройка позволяет пользователю вводить одну длинную строку, такую ​​как «это новая строка», в то время как нажатие «добавить строку» приводит к разделению строки («это, новая, строка»).Однако после ввода одного из этих слов в поле фильтрации (например, «новый») функция фильтра, по-видимому, все еще возвращает входной массив после разделения, не отфильтровывая желаемое слово.Есть мысли о том, как это исправить, чтобы введенное слово, выбранное из исходной строки, было отфильтровано?Спасибо!

JS:

var array = [];

function addStr() {
  var str = document.getElementById("newInput").value;
  var addArray = str.split(" ");
  array.push(addArray);
  document.getElementById("main").append(addArray);
  document.getElementById("newInput").value = "";
}

function addFilterWord() {
  var newText = document.getElementById("wordFilter").value;
  array.push(newText);
  document.getElementById("filter").append(newText);
  document.getElementById("wordFilter").value = "";
  const arrayUpdate = array.filter(param => {
  return param != newText;
});

document.getElementById("final").append(arrayUpdate);
}

HTML:

<input id="newInput">
<button onclick="addStr()">Add String</button>

<input id="wordFilter">
<button onclick="addFilterWord()">Filter Word</button>

<p id="main"></p>
<p id="filter"></p>
<p id="final"></p>

Answer 1

Вот решение

var addArray = [];

const newInput = document.getElementById("newInput");
const wordFilter = document.getElementById("wordFilter");

const filter =   document.getElementById("filter");
const final = document.getElementById("final");
const main = document.getElementById("main");

function addStr() {
  var str = newInput.value;
  addArray = addArray.concat(str.trim().split(" "));
  newInput.value = "";
  main.innerText = "Main: " + addArray.join(", ");
}

function addFilterWord() {
  var newText = wordFilter.value;
  filter.innerText = "Filter: " + newText;
  final.innerText = "Final: " +  addArray.filter(item=>item.includes(newText)).join(", ");
};

<input id="newInput">
<button onclick="addStr()">Add String</button>

<input id="wordFilter">
<button onclick="addFilterWord()">Filter Word</button>

<p id="main"></p>
<p id="filter"></p>
<p id="final"></p>

Answer 2

заменить номер строки6 с array.push(...addArray);

комментария №.13 //array.push(newText);

и должно работать как положено:)

Answer 3

Когда вы помещаете массив в массив, вы в конечном итоге получаете массив с одним элементом, который является переданным вами массивом.Например:

let str  = "this is a new string"
let array = []
var addArray = str.split(" ");
array.push(addArray);

// array has one element
console.log("length:", array.length)
console.log(array)

Вместо этого вы можете распределить один массив в другой:

let str  = "this is a new string"
let array = []
var addArray = str.split(" ");
array.push(...addArray);
// now array has all the elments on the first level
console.log("length:", array.length)
console.log(array)

Существуют и другие варианты, если оператор распространения невозможен (как в старых браузерах).Вы можете использовать concat(), но тогда вы создадите новый массив, поэтому вам придется изменить несколько вещей.