0

I have this react app that holds items and has a search bar for those items. I'm trying to make it so when you type in the search it'll show the items with matched patterns but the search term is highlighted in the items title.

For example: You search: casserole Results will show: "Broccoli Cheese Casserole"

My issue that I can't get my function to return the title case insensitive... My function:

  const formatTitle = (title) => {
    const searchTerm = 'casserole';
    const escapeRE = new RegExp(/([.*+?^=!:$(){}|[\]\\])/g)
    const safeRE = (string) => {
      return string.replace(escapeRE, '$1');
    }

    return ( <span dangerouslySetInnerHTML={{ __html : title.replace(safeRE(searchTerm), `<strong>${searchTerm}</strong>`) }} /> )
  }

It does indeed return a matched item but for whatever reason it does not put the strong tag around the search term match in the title. If you match the case, Casserole, in your search, it will put the strong tags around it.... I'm so confused. I'm not very savvy with regex.

I pieced my function together from this https://github.com/facebook/react/issues/3386

Thanks!

AllYourBaseRBelong2Us
  • 1
  • 2
  • Before asking a question in Stack Overflow, make sure to do some research first! [Search results](https://www.google.ca/search?q=js+regex+case+insensitive&ie=UTF-8&oe=UTF-8&hl=en-ca&client=safari&safe=active) - You can clearly see lots of examples with the `i` modifier. – MrMythical Jul 28 '21 at 20:07
  • @MrMythical I tried using the i flag but I still get the same result for some reason – AllYourBaseRBelong2Us Jul 29 '21 at 04:54

1 Answers1

0

Take a look at this post that discusses case insensitivity using the /i flag:

Regex: ignore case sensitivity

Dylan
  • 43
  • 5