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

I need to hide each li who don't end with "rouges". Meaning that in this list only "Fruits rouges" and "Haricots rouges" can be displayed because it ends with "rouges". This event has to occur by clicking a button, and has to be only in 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>

Then, I need to click on another button to reset this list (show every li) only if the above filter has been used, and sort it alphabetically.

I've already tried to find the matching word "rouges" by doing :

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);

});

But it doesn't take in consideration the position of "rouges" which must be at the end.

I hope you can help me to do that because i've been puzzling over that for quite some hours now lol, thanks a lot.

CodePudding user response：

There are some steps to get there, using only endsWith is not a solution:

1- You need to extract all items from the DOM, they are the source of truth for your code to work.

2 - Parse the HTMLcollection into an array

3 - Select the itens that ends with 'rouges'

4 - Finally, you must set a way to not display those that doesnt ends with 'rouges'

My aproach is bellow:

    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>

CodePudding user response：

May the force of the regular expressions be with you:

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);

CodePudding user response：

You can use endsWith function to get the elements that only ends with 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>