How to highlight username in html table with JavaScript(almost there)

February 26, 2023

I am using the following JavaScript code to highlight one name in a html table. Using the mark tag with a background colour to highlight the name. It works to highlight the name but breaks the format of the table and just displays a long list of text along with the correct name highlighted.

document.addEventListener("DOMContentLoaded", () => {
  table = document.getElementById("myTable");
  let input = "Sally Jones";
  if (input !== "") {
    let regExp = new RegExp(input, 'gi')
    table.innerHTML = table.textContent.replace(regExp, "<mark>$&</mark>");

  }
});

<table id="myTable" class="sLeague-table">
  <thead>
    <tr>
      <th>Pos</th>
      <th>Name</th>
      <th>Branch</th>
      <th>Units</th>
      <th>Profit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Roger Smith</td>
      <td>Ripon</td>
      <td>12</td>
      <td>£13,000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Charles Strange</td>
      <td>Ely</td>
      <td>12</td>
      <td>£11,500</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Sally Jones</td>
      <td>Bangor</td>
      <td>11</td>
      <td>£10,450</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Carol Smythe</td>
      <td>Chichester</td>
      <td>10</td>
      <td>£9,849</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Any Beatty</td>
      <td>Exeter</td>
      <td>8</td>
      <td>£9,175</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Jill Smithson</td>
      <td>Stevenage</td>
      <td>8</td>
      <td>£8,964</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Peter Cousins</td>
      <td>Derby</td>
      <td>8</td>
      <td>£7,834</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Andrea Peterson</td>
      <td>Leicester</td>
      <td>7</td>
      <td>£7,320</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Jon Wales</td>
      <td>Rochdale</td>
      <td>6</td>
      <td>£5,940</td>
    </tr>
    <tr>
      <td>10</td>
      <td>James Cameron</td>
      <td>Grantham</td>
      <td>5</td>
      <td>£5,480</td>
    </tr>
  </tbody>
</table>

>Solution :

You are overriding your HTML content with the innerContent, which produces:

<table id="myTable" class="sLeague-table">
      Pos
      Name
      Branch
      Units
      Profit
    
  
  
    
      1
      Roger Smith
      Ripon
      12
      £13,000
    
    
      2
      Charles Strange
      Ely
      12
      £11,500
    
    
      3
      <mark>Sally Jones</mark>
      Bangor
      11
      £10,450
    
    
      4
      Carol Smythe
      Chichester
      10
      £9,849
    
    
      5
      Any Beatty
      Exeter
      8
      £9,175
    
    
      6
      Jill Smithson
      Stevenage
      8
      £8,964
    
    
      7
      Peter Cousins
      Derby
      8
      £7,834
    
    
      8
      Andrea Peterson
      Leicester
      7
      £7,320
    
    
      9
      Jon Wales
      Rochdale
      6
      £5,940
    
    
      10
      James Cameron
      Grantham
      5
      £5,480
</table>

What you might need is to replace your text inside the innerHTML:

document.addEventListener("DOMContentLoaded", () => {
  table = document.getElementById("myTable");
  let input = "Sally Jones";
  if (input !== "") {
    let regExp = new RegExp(input, 'gi')
    table.innerHTML = table.innerHTML.replace(regExp, "<mark>$&</mark>");

  }
});

<table id="myTable" class="sLeague-table">
  <thead>
    <tr>
      <th>Pos</th>
      <th>Name</th>
      <th>Branch</th>
      <th>Units</th>
      <th>Profit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Roger Smith</td>
      <td>Ripon</td>
      <td>12</td>
      <td>£13,000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Charles Strange</td>
      <td>Ely</td>
      <td>12</td>
      <td>£11,500</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Sally Jones</td>
      <td>Bangor</td>
      <td>11</td>
      <td>£10,450</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Carol Smythe</td>
      <td>Chichester</td>
      <td>10</td>
      <td>£9,849</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Any Beatty</td>
      <td>Exeter</td>
      <td>8</td>
      <td>£9,175</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Jill Smithson</td>
      <td>Stevenage</td>
      <td>8</td>
      <td>£8,964</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Peter Cousins</td>
      <td>Derby</td>
      <td>8</td>
      <td>£7,834</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Andrea Peterson</td>
      <td>Leicester</td>
      <td>7</td>
      <td>£7,320</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Jon Wales</td>
      <td>Rochdale</td>
      <td>6</td>
      <td>£5,940</td>
    </tr>
    <tr>
      <td>10</td>
      <td>James Cameron</td>
      <td>Grantham</td>
      <td>5</td>
      <td>£5,480</td>
    </tr>
  </tbody>
</table>

One other approach is to only select <td> elements loop over them and insert the <mark> tag if their content matches your search query