0

I am using the following JavaScript to filter table contents (all columns), but I am facing a few issues:

1- I want to add an array for letters so it shows some words with "French accent marks" (e = ë, è, é, ê) - (c = ç).. etc.

2- How to ignore inner html tags, like "href, hidden link, styles.. etc", as now when I filter for href, or .com (in the html code) it shows as a results.

3- Is it possible to ignore a whole column? (If I have like 5 columns, can I ignore column 3 for example with all its content?

The following is the current working code:

const myFunction = () => {
  const trs = document.querySelectorAll('#myTable tr:not(.header)')
  const filter = document.querySelector('#myInput').value
  const regex = new RegExp(filter, 'i')
  const isFoundInTds = td => regex.test(td.innerHTML)
  const isFound = childrenArr => childrenArr.some(isFoundInTds)
  const setTrStyleDisplay = ({ style, children }) => {
    style.display = isFound([
      ...children // <-- All columns
    ]) ? '' : 'none' 
  }
  
  trs.forEach(setTrStyleDisplay)
}
<input 
  type="text" 
  id="myInput" 
  onkeyup="myFunction()" 
  placeholder="search.." 
  title="search">
<br>

<div align="center">
    <table border="1" id="myTable" >
        <tr>
            <td>cédille</td>
            <td><a href="google.com">book</a></td>
        </tr>
        <tr>
            <td>Le tréma</td>
            <td>accent </td>
        </tr>
        <tr>
            <td>garçon </td>
            <td>accept</td>
        </tr>
    </table>
</div>
Mike
  • 2,051
  • 4
  • 28
  • 46

1 Answers1

0

  1. You can remove the accents from the content before searching

  2. Use innerText instead of innerHTML

  3. Filter out the unwanted column indices

const removeAccents = str => str.normalize("NFD").replace(/\p{Diacritic}/gu, "");

const myFunction = () => {
  const trs = document.querySelectorAll('#myTable tr:not(.header)')
  const filter = document.querySelector('#myInput').value
  const regex = new RegExp(filter, 'i')
  const isFoundInTds = td => regex.test(removeAccents(td.innerText))
  const isFound = childrenArr => childrenArr.some(isFoundInTds)
  const setTrStyleDisplay = ({ style, children }) => {
    style.display = isFound(
      [...children].filter((_, i) => i !== 2) // <-- All columns except the 3rd (index 2)
    ) ? '' : 'none' 
  }
  
  trs.forEach(setTrStyleDisplay)
}
<input 
  type="text" 
  id="myInput" 
  onkeyup="myFunction()" 
  placeholder="search.." 
  title="search">
<br>

<div align="center">
    <table border="1" id="myTable" >
        <tr>
            <td>cédille</td>
            <td><a href="google.com">book</a></td>
            <td>ignored</td>
            <td>included</td>
        </tr>
        <tr>
            <td>Le tréma</td>
            <td>accent </td>
            <td>ignored1</td>
            <td>included1</td>
        </tr>
        <tr>
            <td>garçon </td>
            <td>accept</td>
            <td>ignored2</td>
            <td>included2</td>
        </tr>
    </table>
</div>

Also, in the future, post your questions separately

grimsteel
  • 796
  • 1
  • 17
  • Great, thanks.. One last thing, I was asking for the array as some languages has the diacritics or marks change how the actual letter is written, like in Arabic first letter is أ (and also: آ، إ، ا). I'll accept the answer, but please updated it for the array option. Thanks. – Mike Mar 25 '23 at 17:56
  • @Mike If I understand you correctly, you'd have to build an array of all possible mappings of letters. I'm not sure how to proceed with that, but I did a quick search and [this](https://stackoverflow.com/a/9667817) might help – grimsteel Mar 25 '23 at 18:01