高亮匹配文本过滤器 javascript

Question

I'm doing a search filter highlight. But it renders [object Object] instead of <mark>match values</mark> when replacing the values.

Currently I have this code.

this.countries.response.filter((val) => {
  const position = val.value.toLowerCase().indexOf(this.controls.country.toLowerCase());
  if (this.controls.country == "") {
    return val;
  } else if (position !== -1) {
    return val;
  }
}).map((e) => {
    const position = e.value.toLowerCase().indexOf(this.controls.country.toLowerCase());
    let matches = e.value.substring(position, this.controls.country.length + position);
    const regex = new RegExp(matches, 'gi');
    const highlighted = e.value.replace(regex, '<mark>'+{matches}+'</mark>');
      return (
        <li class="lov-val list-group-item">
          <p>{highlighted}</p>
        </li>
    )
})

And I am having this output.

I'm doing something like this.

Answer 1

You're seeing [object Object] because you're appending an object to your string with {matches} . You should do something like '<mark>' + matches + '</mark>' so that you append a string instead.

However that probably won't fix the issue. I suspect you'll still see the string '<mark>EXAMPLE_TEXT</mark>' in your output instead of actual html. This is because text content containing valid html is just interpreted as text, the browser won't parse it as html.

It looks like you're writing jsx , so I'm assuming you're using React. An easy fix would be to use the dangerouslySetInnerHTML prop. However there are security concerns with using this (hence the cautious name) so use it at your own discretion.

I don't have an immediate alternative at mind, but I imagine there should be some way to break up each country string into separate components without having to use dangerouslySetInnerHTML and regex replace shenanigans.

eg

<span>
  <span>
    SOUTH
  </span>
  <mark>
    AME // this is the part that's highlighted
  </mark>
  <span>
    RICA
  </span>
</span>

Answer 2

Without knowing all your code, I suspect you are only missing one step. You get an HTMLCollection. You have to iterate this and enclose the match - as you already did correctly - with mark.

Here is an example that makes it even clearer for you.

 const term = "c" const countries = document.querySelectorAll("#countries div"); for(let i = 0; i < countries.length; i++) { countries[i].innerHTML = countries[i].innerHTML.replace(new RegExp(term, "gi"), (match) => `<mark>${match}</mark>`); }

 <div id="countries"> <div class="item">USA</div> <div class="item">China</div> <div class="item">Canada</div> </div> <div id="output"></div>

Answer 3

I've done something like this:

HTML

<div>
    <form>
      <input type="text" id="input" oninput="filter_list()" placeholder="search..." />
    </form>
   </div>
       <div class="list overflow-auto">
         <ul class="list-group">
            <li class="list-group-item">Elephant</li>
            <li class="list-group-item">Kangaroo</li>
            <li class="list-group-item">Monkey</li>
            <li class="list-group-item">Snake</li>
            <li class="list-group-item">Zebra</li>
            <li class="list-group-item">Panda</li>
         </ul>
       </div>

CSS

.yellow{
  color: #ebae00;
}

JavaScript

let input = document.querySelector('#input');
let list = document.querySelector('.list .list-group').querySelectorAll('li');

function filter_list() {
  let result = new RegExp(input.value, 'i');
  list.forEach((item) => {
    if (result.test(item.textContent)) {
      item.innerHTML = item.textContent.replace(result, '<b class="yellow">$&</b>');
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
}

If you want to see the code working, here is my CodePen code: Highlight text filter