Question

我正在尝试构建一个小型应用程序，该应用程序允许用户将字符串输入到数组中，将字符串拆分为单独的数组项，然后（在单独的字段中）输入希望过滤的字符串中的特定单词。当前设置使用户能够输入一个长字符串，例如“ this is a new string”，而单击“ add string”会导致字符串拆分（“ this，is，a，new，string”）。但是，在将这些单词之一输入到过滤字段（例如“ new”）后，过滤器功能似乎仍会返回输入后分割数组，而不会过滤出所需的单词。关于如何解决此问题的任何想法，以便对从原始字符串中选择的输入单词进行过滤？谢谢！

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

将数组推入数组时，最终会得到一个带有一个元素的数组，这就是您推入的数组。例如：

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()，但随后需要创建一个新数组，因此需要进行一些更改。

Answer 2

这是一个解决方案

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 3

替换行号6 array.push(...addArray);

注释行号13 //array.push(newText);

它应该可以按预期的方式工作：）

使用.split（）和.filter（）方法从数组字符串中删除单词

3 个答案: