How to present the searchInput highlighted in the results?

Question

I'm trying to present the searched part in the result in a highlighted background (both the company name, and company symbol). The data is passing through, but the result doesn't seem to highlight what is being inputted. What am I missing?

Example below - input is 'aa' but results highlights c, or m, or l

//JAVASCRIPT//

 class SearchResults {
      constructor(element) {
        this.element = element;
        this.search = document.getElementById("searchInput");
      }
      renderResults(companyProfiles) {
        const searchInput = this.search;
        let dataList = "";
        companyProfiles.forEach((company) => {
          const { profile } = company;
          //company stock percent style based on positive or negative change//
          const profileChangesPercent = Number(profile.changesPercentage);
          let changesPercentage;
          // changesPercentage innerHTML positive/negative percent
          if (profileChangesPercent >= 0) {
            changesPercentage = `<span style="color: green;"> ${profileChangesPercent.toFixed(
              2
            )}%</span>`;
          } else if (profileChangesPercent < 0) {
            changesPercentage = `<span style="color: red;"> ${profileChangesPercent.toFixed(
              2
            )}%</span>`;
          } else {
            changesPercentage = "";
          }
          // Get company name
          let { companyName } = profile;
          // Highlight match for company name
          let match = companyName.match(new RegExp(searchInput, "i"));
          if (match) {
            companyName = companyName.replace(
              match[0],
              `<strong style="background: yellow;">${match[0]}</strong>`
            );
          }
          // Get symbol of company
          let { symbol } = company;
          //Highlight match for company symbol
          match = symbol.match(new RegExp(searchInput, "i"));
          if (match) {
            symbol = symbol.replace(
              match[0],
              `<strong style="background: yellow;">${match[0]}</strong>`
            );
          }
          //company image, name, symbol, percent change in stock value//
          dataList += `<li onclick="location.href='./html/company.html?symbol=${company.symbol}'">
            <span><img src='${profile.image}' width="30px" height="30px" onerror="this.src='./images/MonkeyPlaceholder.png'" alt="monkey"/ > 
            <p>${companyName}</p></span> <span><span style="font-weight:bold">${symbol}</span> <span>${changesPercentage}</span><span><button class="comparebutton">Compare</button></span></span></li>`;
        });
        this.element.innerHTML = `<ul>${dataList}</ul>`;
      }
    }

Answer 1

You have to set searchInput with this.search.value not this.search.

this.search is a HTML element.

I've tested with a console. This can help you to understand your problem.