title: Highlight matched letters/words in a search list using ReactJs
body: <p>I looked through different sources having similar question, and I got this so far:</p>
  
  <pre><code>var Component = React.createClass({
    render(results,values) {
     var regex = new RegExp("(" + values + ")", "gi");
     var name = this.props.name;
     return (
         &lt;div style={myCssStyle}&gt;{name.replace(regex, "&lt;em&gt;$1&lt;/em&gt;")}&lt;/div&gt;
    );
   });
  });
  </code></pre>
  
  <p>so now if I search for "la" in the list and considering there are multiple matches to it one among them being: "last", it outputs:</p>
  
  <pre><code>&lt;em&gt;la&lt;/em&gt;st
  </code></pre>
  
  <p>how can i display name with bold or italic and not have the "<code>&lt;em&gt;</code>" in the lits.</p>
  
  <p>UPDATE::::::</p>
  
  <p>I updated my code as per ScottWe's suggestion and it works for cases where there are no repeated letters found eg: when i search for "o", it gives:</p>
  
  <p><a href="https://i.stack.imgur.com/hxxG2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hxxG2.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/llG4D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/llG4D.png" alt="enter image description here"></a></p>
  
  <p>the words are : <strong>color</strong> and <strong>onRowClick</strong></p>
  
  <p>Expected o/p: </p>
  
  <p>c<strong>o</strong>lor  ->searching for 'o' in the list</p>
  
  <p><strong>c</strong>lick ->searching for 'c' in the list</p>
  
  <p>I dont necessarily have to highlight the  other 'o' or 'c' in the above words.?</p>
  
  <p>hope this helps!!!</p>
  
  <p>thanks!</p>