Simplemente modificando la respuesta de AnanthDev para usar replace , que creo que OP está tratando de usar.

 const str = "aaaaa: lorem ipsum bb: do lor sit amet ccc: no pro movet"; const boldArr = str.replace(/(\b[^\s]+)(:)/g, `\n${'$1'.bold()}$2`).split('\n').filter(x => x).map(x => x.trim()); console.log(boldArr);

Como alternativa a la división, puede hacer coincidir con 2 grupos de captura (indicados como m[1] y m[2] en el código de ejemplo) y poner el primer grupo en negrita en la devolución de llamada de Array.from

 (\w+)(:.*?)(?=\s+\w+:|$)

• (\w+) Captura 1+ caracteres de palabra en el grupo 1
• (:.*?) Captura : y la menor cantidad posible de caracteres en el grupo 2
• (?=\s+\w+:|$) Búsqueda anticipada positiva, afirmación de 1+ caracteres de palabra seguidos de : o el final de la cadena a la derecha

Vea una demostración de expresiones regulares .

 const regex = /(\w+)(:.*?)(?=\s+\w+:|$)/g str = "aaaaa: lorem ipsum bb: do lor sit amet ccc: no pro movet" str = Array.from(str.matchAll(regex), m => `<b>${m[1]}</b>${m[2]}`); console.log(str);

Puedes usar

 var Component = React.createClass({ render: function() { var text = this.props.text.split(/\s+(?=\w+:)/).map((address, index) => <p key={index}>{ address.split(/(?=:)/).map((x,i)=> i===0 ? <b key={i}>{x}</b> : x) } </p> ); return <div className="text">{text}</div>; } }); var text = 'aaaaa: lorem ipsum bb: do lor sit amet ccc: no pro movet'; ReactDOM.render( <Component text={text} />, document.getElementById('container') );

 p { margin: 0; padding: 0; }

 <script src="https://unpkg.com/react@0.14.0/dist/react-with-addons.js"></script> <script src="https://unpkg.com/react-dom@0.14.0/dist/react-dom.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div>

Detalles :

• .split(/\s+(?=\w+:)/) - divide la cadena str con uno o más caracteres de espacio en blanco que son seguidos directamente por caracteres de 1+ palabra y luego un : char
• .map((address, index) => <p key={index}>{ address.split(/(?=:)/).map((x,i)=> i===0 ? <b key={i}>{x}</b> : x) } </p> ) - toma cada división y asigna su valor a address e índice a index , envuelve el elemento con <p key=index> / </p> y modifica el elemento de la manera explicada a continuación...
• address.split(/(?=:)/).map((x,i)=> i===0 ? <b key={i}>{x}</b> : x) - cada cadena de dirección se divide en la ubicación justo antes de : char, y todas las ocurrencias pares se envuelven con la etiqueta <b> , las impares se mantienen como están.

Tenga en cuenta que el atributo de key es necesario para que React pueda manejar cambios mínimos de DOM, consulte Comprensión de claves únicas para matrices secundarias en React.js .