import React, { PropTypes } from 'react';
import { render } from 'react-dom';
import reactReplaceString from 'react-string-replace';

const HighlightNumbers = React.createClass({
  propTypes: {
    content: PropTypes.string.isRequired,
  },

  render() {
    return (
      <div>
        <h1>Highlight Numbers</h1>
        {reactReplaceString(this.props.content, /(\d+)/g, (match, i) => (
          <span key={i} style={{ color: 'red' }}>{match}</span>
        ))}
      </div>
    );
  },
});

const content = 'Hey my number is 555-555-5555.';

// Render the app
render(<HighlightNumbers content={content} />, document.getElementById('root'));

@@ -133,32 +133,20 @@
 %0A%0Aconst 
-HighlightNumbers
+Demo
  = React
@@ -229,202 +229,976 @@
 %0A%0A  
-render() %7B%0A    return (%0A      %3Cdiv%3E%0A        %3Ch1%3EHighlight Numbers%3C/h1%3E%0A        %7BreactReplaceString(this.props.conten
+/**%0A   * NOTE: In many React examples you will see the %60i%60 or %60index%60 variable used%0A   * as the key for JSX tags (such as the %60%3Ca%3E%60 tags in this example), however%0A   * in this case we are iterating in three separate loops. This menas that we%0A   * cannot use %60key=%7Bi%7D%60 because all three JSX tags could get the same key.%0A   */%0A  render() %7B%0A    const text = 'Hey @ian_989, check out this link https://github.com/iansinnott/ Hope to see you at #reactconf';%0A    let replacedText;%0A%0A    // Match URLs%0A    replacedText = reactReplaceString(text, /(https?:%5C/%5C/%5CS+)/g, match =%3E (%0A      %3Ca key=%7Bmatch%7D href=%7Bmatch%7D%3E%7Bmatch%7D%3C/a%3E%0A    ));%0A%0A    // Match @-mentions%0A    replacedText = reactReplaceString(replacedTex
 t, /
+@
 (%5C
-d
+w
 +)/g, 
-(
 match
-, i)
  =%3E (%0A
-    
       %3C
-span
+a
  key=%7B
-i%7D style=%7B%7B color: 'red' %7D
+match%7D href=%7B%60https://twitter.com/$%7Bmatch%7D%60%7D%3E@%7Bmatch%7D%3C/a%3E%0A    ));%0A%0A    // Match hashtags%0A    replacedText = reactReplaceString(replacedText, /#(%5Cw+)/g, match =%3E (%0A      %3Ca key=%7Bmatch%7D href=%7B%60https://twitter.com/hashtag/$%7Bmatch%7D%60
 %7D%3E
+#
 %7Bmat
@@ -1206,24 +1206,109 @@
 h%7D%3C/
-span%3E%0A        ))
+a%3E%0A    ));%0A%0A    return (%0A      %3Cdiv%3E%0A        %3Ch1%3EReact String Replace Demo%3C/h1%3E%0A        %7BreplacedText
 %7D%0A  
@@ -1416,24 +1416,12 @@
 er(%3C
-HighlightNumbers
+Demo
  con

Update example