显示包含特定字符串的 li 并隐藏不包含的字符串

Question

我需要隐藏每一个不以“胭脂”结尾的里。这意味着在此列表中只能显示“Fruits rouges”和“Haricots rouges”，因为它以“rouges”结尾。此事件必须通过单击按钮发生，并且必须仅在 JS 中...

<ul>
  <li>Fruits rouges</li>
  <li>Raisins blanc</li>
  <li>Pomme verte</li>
  <li>Haricots verts</li>
  <li>Haricots rouges</li>
  <li>Rouges gorges</li>
  <li>Fruits exotiques rouges et verts</li>
</ul>

然后，我需要点击另一个按钮来重置这个列表（显示每一里），只有当上面的过滤器被使用时，并按字母顺序排序。

我已经尝试通过以下方式找到匹配的单词“rouges”:

document.getElementById("bouton4").addEventListener("click", function(){

  const items = ['Fruits rouges', 'Raisins blanc', 'Pomme verte', 'Haricots verts', 'Haricots rouges', 'Rouges gorges', 'Fruits exotiques rouges et verts'];
  const matches = items.filter(s => s.includes('rouges'));
  console.log(matches);

});

但没有考虑“胭脂”的位置，必须在末尾

我希望你能帮助我做到这一点，因为我已经为此困惑了好几个小时了，哈哈，非常感谢。

Answer 1

有一些步骤可以实现，仅使用 endsWith 不是解决方案：

1- 您需要从 DOM 中提取所有项目，它们是您的代码正常工作的真实来源。

2 - 将 HTML 集合解析为数组

3 - Select 以 'rouges'

结尾的项目

4 - 最后，您必须设置一种方法来不显示那些不以 'rouges'

结尾的内容

我的方法如下：

    document.getElementById("bouton4").addEventListener("click",
        function () {

            const itens = document.getElementsByTagName('li')
            const arr = [].slice.call(itens);
            const endsWithRouges = arr.map(li => li.innerHTML.endsWith('rouges'));
            endsWithRouges.forEach((e, i) => {
                if (!e) itens.item(i).style.display = 'none';
            })

        });

<ul>
    <li>Fruits rouges</li>
    <li>Raisins blanc</li>
    <li>Pomme verte</li>
    <li>Haricots verts</li>
    <li>Haricots rouges</li>
    <li>Rouges gorges</li>
    <li>Fruits exotiques rouges et verts</li>
</ul>
<button id="bouton4">Hide not rouges</button>

Answer 2

愿正则表达式的力量与你同在：

const items = [
  'Fruits rouges',
  'Raisins blanc',
  'Pomme verte',
  'Haricots verts',
  'Haricots rouges',
  'Rouges gorges',
  'Fruits exotiques rouges et verts'
];

const matches = items.filter(s => /rouges$/.test(s));
console.log(matches);

Answer 3

您可以使用endsWith函数获取仅以rouges

结尾的元素

const ul = document.querySelector("ul");
const items = [
  'Fruits rouges',
  'Raisins blanc',
  'Pomme verte',
  'Haricots verts',
  'Haricots rouges',
  'Rouges gorges',
  'Fruits exotiques rouges et verts'
];

function render(arr) {
  ul.innerHTML = "";

  arr.forEach(list => {
    const li = document.createElement("li");
    li.textContent = list;
    ul.appendChild(li);
  })
}

let isFiltered = false;
document.getElementById("bouton4").addEventListener("click", function() {
  const matches = items.filter(s => s.endsWith('rouges'));
  console.log(matches);
  render(matches);
  isFiltered = true;
});


document.querySelector("#bouton5").addEventListener("click", () => {
  if (isFiltered) {
    render([...items].sort((a, b) => a.localeCompare(b)))
  }
})

document.querySelector("#bouton6").addEventListener("click", () => {
  render(items)
})

<button id="bouton4"> filter ends with rouges</button>
<button id="bouton5"> reset with sorting</button>
<button id="bouton6"> reset </button>
<ul>
  <li>Fruits rouges</li>
  <li>Raisins blanc</li>
  <li>Pomme verte</li>
  <li>Haricots verts</li>
  <li>Haricots rouges</li>
  <li>Rouges gorges</li>
  <li>Fruits exotiques rouges et verts</li>
</ul>

显示包含特定字符串的 li 并隐藏不包含的字符串

Show li's including a particular string and hide does who don't

javascript

arrays

list

filter

include