Replace part of string with tag in JSX

The accepted answer worked well in 2015, but now better solutions exist.

For this problem issue #3368 was created and based on the solution provided by a Facebook employee working on React, react-string-replace was created.

Using react-string-replace, here is how you can solve your problem

const reactStringReplace = require('react-string-replace');

const HighlightNumbers = React.createClass({
  render() {
    const content="Hey my number is 555:555:5555.";
    return (
      <span>
        {reactStringReplace(content, ':', (match, i) => (
          <div className="spacer"></div>
        ))}
      </span>
    );
  },
});