Highlight text using ReactJS

Question

I'm trying to highlight text matching the query but I can't figure out how to get the tags to display as HTML instead of text.

var Component = React.createClass({     _highlightQuery: function(name, query) {         var regex = new RegExp("(" + query + ")", "gi");         return name.replace(regex, "<strong>$1</strong>");     },     render: function() {         var name = "Javascript";         var query = "java"         return (             <div>                 <input type="checkbox" /> {this._highlightQuery(name, query)}             </div>         );     } }); 

Current Output: <strong>Java</strong>script

Desired Output: Javascript

Answer 1

Here is my simple twoliner helper method:

getHighlightedText(text, highlight) {     // Split text on highlight term, include term itself into parts, ignore case     const parts = text.split(new RegExp(`(${highlight})`, 'gi'));     return <span>{parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? <b>{part}</b> : part)}</span>; } 

It returns a span, where the requested parts are highlighted with <b> </b> tags. This can be simply modified to use another tag if needed.

UPDATE: To avoid unique key missing warning, here is a solution based on spans and setting fontWeight style for matching parts:

getHighlightedText(text, highlight) {     // Split on highlight term and include term into parts, ignore case     const parts = text.split(new RegExp(`(${highlight})`, 'gi'));     return <span> { parts.map((part, i) =>          <span key={i} style={part.toLowerCase() === highlight.toLowerCase() ? { fontWeight: 'bold' } : {} }>             { part }         </span>)     } </span>; } 

Answer 2

Here is an example of a react component that uses the standard <mark> tag to highlight a text:

const Highlighted = ({text = '', highlight = ''}) => {    if (!highlight.trim()) {      return <span>{text}</span>    }    const regex = new RegExp(`(${_.escapeRegExp(highlight)})`, 'gi')    const parts = text.split(regex)    return (      <span>         {parts.filter(part => part).map((part, i) => (             regex.test(part) ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span>         ))}     </span>    ) } 

And here is how to use it

<Highlighted text="the quick brown fox jumps over the lazy dog" highlight="fox"/>