如何从数组中过滤元素直到特定字符串

时间：2017-08-20 14:25:24

标签： javascript arrays string filter element

我正在尝试将数组中的元素过滤掉，直到特定的字符串，在这种情况下是日期名称（周一，周二，周三等），我用这个变量得到：

var day = new Date(reservation.startDate);

我有一个元素数组，我正在使用push()方法将它们添加到数组中。

这是数组：

console.log(JSON.stringify(arrayData, null, 4))

[
    "<b>Mon</b>",
    "<b>AUT14</b>",
    "<b>KL25AB55200-3001</b>",
    "<b>Mon</b>",
    "<b>AUT15</b>",
    "<b>KC23DK20010-3003</b>",
    "<b>Tue</b>",
    "<b>TI14</b>",
    "<b>KL04BT10110-3001</b>",
    "<b>Tue</b>",
    "<b>AUT15</b>",
    "<b>KL25AB10451-3001</b>",
    "<b>Tue</b>",
    "<b>AUT13</b>",
    "<b>AUT13</b>",
    "<b>KL25AD10000-14</b>",
    "<b>Tue</b>",
    "<b>ASR14</b>",
    "<b>Wed</b>",
    "<b>TI14</b>",
    "<b>IPS16</b>",
    "<b>A800BD65-3001</b>",
    "<b>Wed</b>",
    "<b>TI14</b>",
    "<b>KL04BT10110-3001</b>",
    "<b>Wed</b>",
    "<b>AUT15</b>",
    "<b>KL25AB55200-3002</b>",
    "<b>Thu</b>",
    "<b>AUT16</b>",
    "<b>KL25AB10250-3001</b>",
    "<b>Thu</b>",
    "<b>TI14</b>",
    "<b>IPS16</b>",
    "<b>A800BD65-3001</b>",
    "<b>Thu</b>",
    "<b>TI13</b>",
    "<b>TI14</b>",
    "<b>KL25AB10300-3001</b>"        
]

如果我想打印仅包含“Mon”的数据，我使用：

if (day.toString().indexOf("Mon") >= 0) {                             
    document.getElementById("Monday").innerHTML = arrayData.join("");
}

但是如果我在周三使用相同的方法，我会从星期一，星期二获得数据，直到星期三，这是不理想的，因为我只想要来自周三的数据。

if (day.toString().indexOf("Wed") >= 0) {                                                                     
    document.getElementById("Wednesday").innerHTML = arrayData.join("");
}

那么有没有一种有效的方法从阵列中间选择数据而不包括其他日子？

我必须使用核心JavaScript，因此无法使用任何框架。

澄清

我需要将每天的数据打印到他们自己的innerHTML部分。

所以我需要("Monday").innerHTML的这些数据：

"<b>Mon</b>",
"<b>AUT14</b>",
"<b>KL25AB55200-3001</b>",
"<b>Mon</b>",
"<b>AUT15</b>",
"<b>KC23DK20010-3003</b>",

("Tuesday").innerHTML：

"<b>Tue</b>",
"<b>TI14</b>",
"<b>KL04BT10110-3001</b>",
"<b>Tue</b>",
"<b>AUT15</b>",
"<b>KL25AB10451-3001</b>",
"<b>Tue</b>",
"<b>AUT13</b>",
"<b>AUT13</b>",
"<b>KL25AD10000-14</b>",
"<b>Tue</b>",
"<b>ASR14</b>",

("Wednesday").innerHTML：

"<b>Wed</b>",
"<b>TI14</b>",
"<b>KL04BT10110-3001</b>",
"<b>Wed</b>",
"<b>AUT15</b>",
"<b>KL25AB55200-3002</b>",

("Thursday").innerHTML：

"<b>Thu</b>",
"<b>AUT16</b>",
"<b>KL25AB10250-3001</b>",
"<b>Thu</b>",
"<b>TI14</b>",
"<b>IPS16</b>",
"<b>A800BD65-3001</b>",
"<b>Thu</b>",
"<b>TI13</b>",
"<b>TI14</b>",
"<b>KL25AB10300-3001</b>"

注意数据每天都在变化，所以我应该过滤掉其他几天的数据以及数据中我不想包含在innerHTML中的数据吗？

2 个答案:

答案 0 :(得分：1)

如果我得到了你需要的东西，那么只需使用数组过滤功能并连接条件，然后通过＆＃34;你的日子＆＃34;。

＆＃13;
＆＃13; 
var array = [
'<b>Mon</b>,<b>AUT14</b>,<b>KL25AB55200-3001</b>',
'<b>Mon</b>,<b>AUT15</b>,<b>KC23DK20010-3003</b>',
'<b>Tue</b>,<b>TI14</b>,<b>KL04BT10110-3001</b>',
'<b>Tue</b>,<b>AUT15</b>,<b>KL25AB10451-3001</b>',
'<b>Tue</b>,<b>AUT13</b>,<b>AUT14</b>,<b>KL25AD10000-14',
'<b>Wed</b>,<b>TI14</b>,<b>IPS16</b>,<b>A800BD65-3001',
'<b>Wed</b>,<b>TIT14</b>,<b>KL04BT10110-3001</b>',
'<b>Thu</b><br/>,<b>AUT16</b>,<b>KL25AB10250-3001</b>',
'<b>Thu</b><br/>,<b>TI14</b>,<b>KOR16</b>,<b>A800BD65-3001</b>'
];
function filtering(day, el) {
  return el.includes('<b>'+day+'</b>');
}
// printing all Thu
console.log(array.filter(filtering.bind(null, 'Thu')).join(''));
// printing all Wed
console.log(array.filter(filtering.bind(null, 'Wed')).join(''));
＆＃13;
＆＃13;
＆＃13;

已编辑

我现在明白你的数据安排得很糟糕，而且你有很多元素，而不是你在控制台中显示的按行分组，所以这里有一个版本，以便重新排列你的数据，然后执行你的操作：

＆＃13;
＆＃13; 
var list = [
'<b>Mon</b>','<b>AUT14</b>','<b>KL25AB55200-3001</b>',
'<b>Mon</b>','<b>AUT15</b>','<b>KC23DK20010-3003</b>',
'<b>Tue</b>','<b>TI14</b>','<b>KL04BT10110-3001</b>',
'<b>Tue</b>','<b>AUT15</b>','<b>KL25AB10451-3001</b>',
'<b>Tue</b>','<b>AUT13</b>','<b>AUT14</b>','<b>KL25AD10000-14',
'<b>Wed</b>','<b>TI14</b>','<b>IPS16</b>','<b>A800BD65-3001',
'<b>Wed</b>','<b>TIT14</b>','<b>KL04BT10110-3001</b>',
'<b>Thu</b><br/>','<b>AUT16</b>','<b>KL25AB10250-3001</b>',
'<b>Thu</b><br/>','<b>TI14</b>','<b>KOR16</b>','<b>A800BD65-3001</b>'
];
const keywords = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
// starting data
// console.log(list);
//first reduce your array to a better data format
var orderedList = list.reduce(function(accumulator, currentValue, currentIndex, array) {
  if (keywords.filter(el => currentValue.indexOf(el) > -1).length > 0) {
     accumulator.push(currentValue);
  }
  else {
     accumulator[accumulator.length - 1] += currentValue;
  }
  return accumulator;
}, []);
// here the ordered data
// console.log(orderedList);

function filtering(day, el) {
  return el.includes('<b>'+day+'</b>');
}
// printing all Thu
console.log(orderedList.filter(filtering.bind(null, 'Thu')).join(''));
// printing all Wed
console.log(orderedList.filter(filtering.bind(null, 'Wed')).join(''));
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

如果向元素添加类和数据属性，则可能更容易：

HTML 

<div class="day" data-name="Monday"></div>
<div class="day" data-name="Tuesday"></div>
<div class="day" data-name="Wednesday"></div>
<div class="day" data-name="Thursday"></div>

然后，您可以使用document.querySelectorAll：

一次性获取所有元素 
var days = document.querySelectorAll('.day');

然后迭代每个元素，将data-name属性作为id，根据数组元素的子字符串进行检查，过滤掉匹配的元素，然后添加帽子HTML到元素。

days.forEach(day => {
  const id = day.getAttribute('data-name').substr(0, 3);

  // Remember that in a couple of cases the filter is going to
  // return an array of two or more elements (Tuesday for example)
  // so you need to `join` those elements up
  const html = array.filter(str => str.substr(3, 3) === id).join('');
  day.innerHTML = html;
});

DEMO - 请记住您的数组HTML字符串中有<br/>，这就是为什么输出有点不稳定。

修改

使用您的数据我想出了一个解决方案，以获得一些体面的输出。如果它看起来有用，我会把它留在这里：

document.querySelectorAll('.day').forEach(day => {

  // Get the day name and the id (short day name)
  const label = day.getAttribute('data-name');
  const id = label.substr(0, 3);

  // Grab the relevant HTML
  const htmlArr = array.filter(str => str.substr(3, 3) === id);

  // Iterate over the filtered HTML array
  const rows = htmlArr.map(el => {

    // Split the HTML row into components
    const html = el.split(',');

    // Extract what I've called the ID and the CODE
    const id = html[1].match(/>([A-Z0-9]*)</)[1];
    const code = html[2].substr(3, 16);

    // Return that information as HTML in a template
    return `<span>${id} | ${code}</span>`;

  // For each row in the filter array, join the the returned HTML
  // with a <br/>
  }).join('<br/>');

  // Finally, use our label, and add the rows
  day.innerHTML = `<b>${label}</b><br/>${rows}`;
});

你以此结束：

Monday
AUT14 | KL25AB55200-3001
AUT15 | KC23DK20010-3003

Tuesday
TI14 | KL04BT10110-3001
AUT15 | KL25AB10451-3001
AUT13 | AUT14

Wednesday
TI14 | IPS16
TIT14 | KL04BT10110-3001

Thursday
AUT16 | KL25AB10250-3001
TI14 | KOR16

<强> DEMO

相关问题
最新问题